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>

Answer 1

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>

Answer 2

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>