how to sort json with multiple columns-CodePudding

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!

CodePudding user response：

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)
})

CodePudding user response：

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)
  }
}