[Vuejs]-VueJS – Got JSON and want to create a table to count distinct values

by

0👍

✅

Did it now with:

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

and

  countData (jitcalls) {
    return _.countBy(_.map(this.jitcalls, function (d) {
      return d.ANLIE
    }))

Thank you!! 🙂

0👍

UPDATED

This logic can be implemented directly by javascript. Vue.js is not and should not be responsible for this.
You can use _.groupBy from lodash or write your own implementaion.

This is one of possible solutions:

computed: {
   preparedData(){
      return _.groupBy(this.data, 'STATUS');
   }
}

And then use preparedData instead of data in the template.

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

Check the example here: https://codepen.io/probil/pen/MOVMQj?editors=1010

Leave a comment