How to sort a VueJS object in descending order of the number of occurrences?

Question

I have a dynamic object that consists of the number of occurrences from a user selection. The object looks like this:

{ "Excitement": 2, "Competence": 3, "Sophistication": 1 }

This is the function:

rankFactors() {
      const headers = this.headers;
      var counts = {};
      for (var i = 0; i < headers.length; i++) {
        var num = headers[i];
        counts[num] = counts[num] ? counts[num] + 1 : 1;
      }
      return counts;
 }

How do I sort this object so that it is always in descending order? That way I can print it as a 'Top 3' list.

This is my CodeSandbox: https://codesandbox.io/embed/vue-template-mzi03

To reproduce just make selection of personality traits, with multiple options from a few headers.

Possible duplicate of [Does ES6 introduce a well-defined order of enumeration for object properties?](https://stackoverflow.com/questions/30076219/does-es6-introduce-a-well-defined-order-of-enumeration-for-object-properties) — str, Jun 10 '19 at 15:58
If i change var counts = {}; to var counts = [] it breaks it for some reason. — RDowns, Jun 10 '19 at 16:07

score 1 · Accepted Answer · answered Jun 10 '19 at 23:04

I think I'd do it something like this:

rankFactors() {
  const headers = this.headers;
  const counts = {};

  for (const header of headers) {
    counts[header] = (counts[header] || 0) + 1;
  }

  const factors = Object.keys(counts).map(header => {
    return {
      name: header,
      count: counts[header]
    }
  });

  factors.sort((a, b) => b.count - a.count);

  return factors;
}

The first stage is very similar to what you had, building up an object of counts. That's an easy data structure to work with for gathering those counts but once that stage is done it's not a great choice for dealing with sorting. For that we're better off with an array.

So next up it converts the object into an array of objects, each of the form {name: 'Excitement', count: 2}. This array is then sorted based on the counts and then returned. You could throw in a .slice(0, 3) if you just want the top 3.

This works perfectly and is exactly what I wanted to achieve! — RDowns, Jun 11 '19 at 08:06

How to sort a VueJS object in descending order of the number of occurrences?

1 Answers1