Object property descending order in Javascript

Question

I'm building a program in Javascript that takes a String as an input (inputTextLower), counts how many times each word was used (similar function to: http://www.writewords.org.uk/word_count.asp), and then displays the frequency of each word in an HTML table. The word frequency counter works fine, but the results are not displaying in order of descending frequency, they're displaying in order of the words in inputTextLower. How can I order the results by frequency? Here's an image to clarify:

And here's my text frequency function and how I'm entering the results into the table:

let tableText = document.querySelector('table');
let inputTextLower = "This is a test test test sentence sentence".toLowerCase();

var pattern = /\w+/g,
  string = inputTextLower;
matchedWords = string.match(pattern);
var counts = matchedWords.reduce(function(stats, word) {
  if (stats.hasOwnProperty(word)) {
    stats[word] = stats[word] + 1;
  } else {
    stats[word] = 1;
  }
  return stats;
}, {});

for (const word in counts) {
    if (counts[word] == 1) {
      tableText.innerHTML += `<tr><td>${word}</td><td>${counts[word]} time</td></tr>`;
    } else {
      tableText.innerHTML += `<tr><td>${word}</td><td>${counts[word]} times</td></tr>`;
    }
  }

<table></table>

You are using an object to store the count for each word. An object has no guaranteed ordering. If you want to show the counts of word in descending order you need to find a way to sort the words using the frequency and then display the words and their corresponding counts in HTML table. — Abrar Hossain
– Abrar Hossain, Commented Feb 3, 2021 at 3:52

Randy Casburn · Accepted Answer · 2021-02-03 03:54:17Z

Use Object.entries() to convert the object into an array of arrays. The key/value pairs can then be sorted on either.

Index 0 is the key and 1 the value. So sort on the value.

This is the line that sorts the arrays on the value:

let sortedCounts = Object.entries(counts).sort((a, b) => b[1] - a[1]);

Then, use array[0] to print the key and array[1] the value for each table entry:

let tableText = document.querySelector('table');
let inputTextLower = "This is a test test test sentence sentence".toLowerCase();

var pattern = /\w+/g,
  string = inputTextLower;
matchedWords = string.match(pattern);
var counts = matchedWords.reduce(function(stats, word) {
  if (stats.hasOwnProperty(word)) {
    stats[word] = stats[word] + 1;
  } else {
    stats[word] = 1;
  }
  return stats;
}, {});

let sortedCounts = Object.entries(counts).sort((a, b) => b[1] - a[1]);


for (const count of sortedCounts) {
  if (count[1] == 1) {
    tableText.innerHTML += `<tr><td>${count[0]}</td><td>${count[1]} time</td></tr>`;
  } else {
    tableText.innerHTML += `<tr><td>${count[0]}</td><td>${count[1]} times</td></tr>`;
  }
}

<table></table>

Mister Jojo · Accepted Answer · 2021-02-03 04:25:03Z

this way, with methods Object.entries() and array.sort()

const
    tableText  = document.querySelector('table')
  , inputText  = "This is a test test test sentence sentence"
  , pattern    = /\w+/g
  , counts     = inputText
                    .toLowerCase()
                    .match(pattern)
                    .reduce((stats, word) =>
      {
      stats[word] = (stats[word] || 0 ) + 1;
      return stats;
      }, {})
      ;
Object.entries( counts )
      .sort((a,b)=>a[1]-b[1])
      .forEach( ([word,freq]) =>
  {
  let newRow = tableText.insertRow()
  newRow.insertCell().textContent = word
  newRow.insertCell().textContent = freq+' time'+((freq>1) ?'s':'')
  })

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
table td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }

<table></table>

Collectives™ on Stack Overflow

Object property descending order in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related