how to sort json with multiple columns

user_16867612 0
Viewed 239

I'm working with BootstrapVue.

I have a json which is structured like this (called json in the complete question)

[
    {"ID": "1", "Name": "Harry", "Age": "18"},
    {"ID": "2", "Name": "Ron", "Age": "18"},
    {"ID": "3", "Name": "Hermione", "Age": "18"},
    {"ID": "4", "Name": "Ginny", "Age": "18"},
    {"ID": "5", "Name": "Fred", "Age": "18"},
]

In my template I show it like following in my <b-form-select> :

<b-form-select class="showPointer">
  <option v-for="item in json" :key="item.id">
    ID: {{ item.id}}, Name: {{ item.name}}, Age: {{ item.age}}
  </option>
</b-form-select>

Now to my problem: I want to sort it based on my name and I know that I have to put it first into a computed-function but I don't know how..

But I want to display it in my template like in my example above (ID, than Name, than Age).

Thanks for your help! Thank You!

bootstrap-vue vuejs2 vue.js javascript
2 Answers

You don't need computed for this.

You could sort it immediately after you receive the request response.

Example

get(....).then(response=> { 
    this.json = response.sort((a,b) => a.name - b.name)
})
user_126642790

Abregre is right, you don't need computed for this.

But in any case, you can use computed like this:

<option v-for="item in sortedJson" :key="item.id">

computed: {
  sortedJson () {
    return this.json.sort((a, b) => a.Name - b.Name)
  }
}
user_70030180
Related