VueJS - Sorting an CountBy Array created by lodash

Question

Got following .json:

[{
"STATUS": "0500",
"POSID": "..."
},
{
"STATUS": "1500",
"POSID": "..."
},
{
"STATUS": "0500",
"POSID": "..."
}]

Counted the values via countBy from lodash:

  countData (data) {
    return _.countBy(_.map(this.data, function (d) {
      return d.status
    }))
  }

A table is generated where my status numbers and counts are displayed:

 <tr v-for="(value, key) in countData">
   <td>{{ key }}</td>
   <td>{{ value }}</td>
 </tr>

Now I want to sort that via value.

How can I accomplish that?

miqh · Accepted Answer · 2017-11-22 05:28:24Z

1

Looks like countData is already a computed property, so if you need to keep it, you can refer to it from another computed property (as this.countData) which should provide the sorted version of the results for presentation.

For example,

computed: {
  countData () { ... },
  sortedCountData () {
    // this.countData looks something like: {'0500': 1, ...}
    return Object.keys(this.countData)
      .sort((i, j) => this.countData[j] - this.countData[i])
      .map(key => ({ key, value: this.countData[key] }));
  },
}

Then you should update your markup so the v-for sources from sortedCountData instead.

If you don't need to keep countData, you may as well do the sorting there.

answered Nov 22, 2017 at 5:28

miqh

3,6642 gold badges31 silver badges38 bronze badges

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

2 Comments

sleepysimon Over a year ago

Is it right that i have to name the tds: <td>{{ value.key }}</td> <td>{{ value.value }}</td> ?

miqh Over a year ago

Yes, that's right—since sortedCountData is a proper array and no longer a object (as returned by the lodash countBy call), each item v-for iterates over is also an object, so you'll need to index into the key and value properties.

Manav Mandal · Accepted Answer · 2017-11-22 05:37:29Z

0

you can sort the array before rendering. OR alternatively you can use css to do this.

<tbody style="display:flex;flex-direction:column"> 
// <tbody> or <table> if parent is <table> tag 
  <tr v-for="(value, key) in countData" style="order:{{value}}">
  <td>{{key}}</td>
  <td>{{value}}</td>
  </tr>
</tbody>

you need to give fixed width on td in case it gets distorted

answered Nov 22, 2017 at 5:37

Manav Mandal

3251 gold badge2 silver badges7 bronze badges

1 Comment

sleepysimon Over a year ago

- style="order:{{ value }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. -> But wont work either.

Collectives™ on Stack Overflow

VueJS - Sorting an CountBy Array created by lodash

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related