How to create an ordered list based on an object key/value paring?

Question

I am trying to render a high score ordered list using an JavaScript object that looks something like this:

{user1: 5, user2: 10}

Using the following code I can generate each list item individual:

Object.entries(data).forEach(([key, value]) => {
    const li = document.createElement('li');
    li.innerHTML = `${key}: ${value}`;
    scoreList.append(li);
});

Now I am looking for a way to sort each list item based on the object value. I know we have the sort function that works on arrays and using the following code almost works:

const keysSorted = Object.entries(data).sort((a, b) => {
    return data[a] - data[b];
});

However it does not keep the object values, it just returns a sorted array with each key. My wanted result looks like this:

<ol>
    <li>user2: 10</li>
    <li>user1: 5</li>
</ol>

Answer 1

Despite the small flaw in .sort, you can just reduce it back to it's previous form. Just map the key/value back to an object:

const data = { user1: 5, user2: 10 };
const keysSorted = Object.entries(data)
  .sort((a, b) => b[1] - a[1])
  .reduce((a, b) => Object.assign(a, { [b[0]]: b[1] }), {});
console.log(keysSorted);

Notes:

• [b[0]] is a computed property name, it resolves the variable before assigning to the object.
• The function docs: Object.entries(), Object.assign(), Array.prototype.sort(), Array.prototype.reduce().