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? — str
– str, Commented Jun 10, 2019 at 15:58
If i change var counts = {}; to var counts = [] it breaks it for some reason. — RDowns
– RDowns, Commented Jun 10, 2019 at 16:07

skirtle · Accepted Answer · 2019-06-10 23:04:02Z

1

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.

answered Jun 10, 2019 at 23:04

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RDowns Over a year ago

This works perfectly and is exactly what I wanted to achieve!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related