Render unordered object Vue

Question

There is an object that has some properties, one of them is the 'average' value, and that object is ordered by that value from the backend, so if we reach that object with Postman, it is shown how it should be:

ranking: {
       "5": {
            "name": "Name5",
            "average": "65"
             },
       "2": {
            "name": "Name2",
            "average": "59"
             },
       "4": {
            "name": "Name4",
            "average": "65"
             },
       "3": {
            "name": "Name3",
            "average": "65"
             },
       "1": {
            "name": "Name1",
            "average": "65"
             },
         }

The problem is that when a v-for is used, it renders based on the index (1,2,3,4,5), but it is needed to be rendered as it comes from the API call.

It is there any way to render

This is the v-for code (in the real object there is a field called id_sharp that corresponds to their personal identifications):

<div v-for="(persona, index) in ranking" :key="persona.id_sharp">
{{ persona.name }} -- {{ persona.average }}
</div>

By default, JS reorders object items in ascending order whenever the key is an integer. https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order — Liro Dasmaz, Jun 13 '21 at 12:09
There is a work around though can be done if you won't able to change the keys from the back end and it depends on what approach you use to handle API calls on the front end. — Liro Dasmaz, Jun 13 '21 at 12:17

score 1 · Answer 1 · answered Jun 13 '21 at 06:25

The problem is that the keys are parse able to numeric. integers. such as "1" , "2" , "3".

see example:

let b =  {   "5": {
            "name": "Name5",
            "average": "65"
             },
       "2": {
            "name": "Name2",
            "average": "59"
             },
       "4": {
            "name": "Name4",
            "average": "65"
             },
       "3": {
            "name": "Name3",
            "average": "65"
             },
       "1": {
            "name": "Name1",
            "average": "65"
             },
         }

console.log(b,"order by index")

let c =  {   "5b": {
            "name": "Name5",
            "average": "65"
             },
       "2b": {
            "name": "Name2",
            "average": "59"
             },
       "4b": {
            "name": "Name4",
            "average": "65"
             },
       "3b": {
            "name": "Name3",
            "average": "65"
             },
       "1b": {
            "name": "Name1",
            "average": "65"
             },
         }
         
         
console.log(c,"keep ordered")

at the end different js engines different behaviours. and you have 2 things to cover all of them.

1- Sort in the front end and map an array with the logic you want

OR the API response with an ordered array of objects.

2- Do not use integers as keys. in case you want to keep order of object.

Thank you for the response. I think a rather do the sort in the front end since I can't change the keys in the backend. — Ivan Parra, Jun 14 '21 at 19:25

Ivan Parra · Accepted Answer · 2021-06-20T22:40:02.343

1

First I get the values of the object and put them into an array, with this lines:

this.ranking = Object.values(
          this.generalFilterData.filter((category) => {
            return category.id == this.id;
          })[0].ranking
        );

Finally what I did was a sort after the ranking was fetched from the API:

       this.ranking.sort(
          (a, b) => parseFloat(b.average) - parseFloat(a.average)
        );

And that did the trick.

Anyway, thank you all for trying to help me.

edited Jun 20 '21 at 22:40

answered Jun 16 '21 at 16:05

Ivan Parra

492
6
16

I didn't understand your answer. How did you `.sort` an object not an array? And if we assume it is correct. In your example the object is not sorted by the average! – Tawfik Nasser Jun 19 '21 at 09:00
@tawfiknasser You are absolutely right. I forgot to put the part of the code that I usted to fetch the object values and bring them into an array. The answer has been edited. Thanks. – Ivan Parra Jun 20 '21 at 22:41

Render unordered object Vue

2 Answers2