Having trouble sorting an array that was previously sorted

JavaScript
1

I created an array using an input of a large block of text. The array contains an object with two keys for the words in the text: 1st key is “word” with a value of each word in the text, and the 2nd key “count” is the count of how many times each word appears in the text. I was able to sort the array by “count”:

let inputWords = wordCount(a);
let output = Object.entries(inputWords).map(([word, count]) => ({ word, count }));

output.sort(function (a, b) {
  return b.count - a.count;
});

console.log(output);

Next, I was able to output just the words onto the page if the “count” is greater than 20. I want to sort the words alphabetically but nothing I do works. Is there something different that you have to do if you want to use sort() with text rather than numbers? Here is the code that outputs the top words but not in alphabetical order:

let w = document.getElementById("sortedList"); //id for my <ul> element

function pageOutput(arr) {

  for (let i = 0; i < arr.length; i++) {
    if (arr[i].count > 20) {
      let newArr = arr.sort();
      let outputHTML = `<li>${newArr[i].word}</li>`;
      w.insertAdjacentHTML("beforeend", outputHTML);

      console.log(newArr[i].word);
    }
  }
}
pageOutput(output);

If I delete the line:

let newArr = arr.sort()

and change the remaining newArr references to arr, then I get the same output.

By the way, I added the words to the DOM as unordered list items using insertAdjacentHTML. Would appendChild be better?

2

I think it would be best to get all the transformations to your data done first, before you start outputting to the DOM.

So here’s the steps I think you should take…

  1. create array of Word objects (the output variable you made above)
  2. filter out words below the count threshold
  3. sort the remaining words alphabetically
  4. output the sorted remaining words to the page in order

For reference:

3

For the alphabetical sorting you could use localeCompare

4

That’s good stuff - I’m a newbie so I would not have thought to do all the work before outputting. What do you mean by #1? Create a new array based on that sorted array (output) or are you picking up at the last point where my results are good?

I thought I might need map but let me brush up on filter(). I’m going to need 2 outputs, though I may change my mind. 1) the highest use words directly onto the page (I may dump this one). 2) output the highest use words by alphabet letter to be added to a drop-down menu or mega-menu or a popup, both outputs in alpha order.

Anyway, let me look at filter and localeCompare - thanks! It’s getting late so I’m shutting down…

5

For #1 you’ve already got that step covered! Sorry that wasn’t clear. The output variable in your code fits the bill.

I think it’s great to have a sense of vision for your project. But from my understanding this is meant to be a learning experience for you, right? In that case, I think you should take one step at a time, in the smallest of chunks possible.

In other words, maybe you will get to that step 2 you wrote someday, but for now get it out of your head and focus on completing step 1. Once you’ve finished it you’ll have a deeper understanding of the domain and may even realize step 2 was unnecessary. Take it in stride!

6

I have a pretty good idea of what I want, it’s just if #1 is overkill. It’s an app for my aunt who has difficulty speaking and bad motor control. So clicking words to write emails would be easier than typing all the letters. The final product will be to add the words she clicks into a text box that she can click to copy and paste into a word doc or email body. I was thinking the most common words should be visible, then she would have to go under each letter for the other words. I am going to use as many samples of her docs and emails as the text to get the word counts and then create the output(s).

I would like to start of the page design with all t he words there, then I think adding the words she clicks would be a simple click addEventListener function. But, I need input from her. She may prefer all of her words to be under each alphabet letter. I think that’s what I will do so I can get this finished by the end of the week.

7

It’s an advanced topic, but why not sort once and be done? If you have an object with two keys, you could sort by count and in the same sort say, if count is equal, by word.c

If two numbers are sorted and are the same value, they return zero from their sort function. If that occurs, simply do the next sort evaluation.

Doing this, your data starts in the shape you want.

I wrote an article about this: How to Use Supercharged Sorts in JavaScript

8

Because I have a few different things I need to do. The first is already done - sort by word count. I’m thinking of outputting the words with the highest count onto the page. Words like “a”, “the”, “and”, etc. I’m not sure I will end up doing that, or how many words I will output to the page, but once I get that list I want them sorted.

Finally, and this may include the highest word counts, I will need to sort alphabetically by word, and then output by each letter of the alphabet.

So I’ve sorted by word count and have to output the highest count words. I also probably want to not include words with a really low count like 1 to maybe 5. So I assume that is 2 different filters, or 1 but with an if and else if statement.

I believe these final sorts and filters are the last steps before getting all the words on the page, using CSS to make it look pretty, then my event listeners for when each word is clicked. I’m not sure how I’m going to do that other than giving every word a unique id, though looping thru an array may do it, though I’m weak in that area.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.