How to render list with different order from array object in vue js?

Question

I get the data from server something like this way:

    "cells": [
        {
          "consultingBudgetHeadName": "Available hours",
          "value": 1806,
          "valueMap": "1 806"
        },
        {
          "consultingBudgetHeadName": "Available customer hours",
          "value": 1773.2,
          "valueMap": "1 773,20"
        },
        {
          "consultingBudgetHeadName": "Absence hours",
          "value": 32.8,
          "valueMap": "32,80"
        },
        {
          "consultingBudgetHeadName": "Available hours project",
          "value": -7092.8,
          "valueMap": "-7 092,80"
        },
        {
          "consultingBudgetHeadName": "Average price",
          "value": 0,
          "valueMap": "0"
        },
        {
          "consultingBudgetHeadName": "Agreement hours",
          "value": 8866,
          "valueMap": "8 866"
        },
        {
          "consultingBudgetHeadName": "Utilization agreements %",
          "value": 500,
          "valueMap": "500"
        }
      ]

Now, if I render a list this way:

<template v-for="(cell, index) in cells">
   <li>
      {{ cell.consultingBudgetHeadName }}
   </li>
</template>

It will show the output this way:

Available hours
Available customer hours
Absence hours
Available hours project
Average price
Agreement hours
Utilization agreements %

But I need the order in a different way than the order of the array. I want my order will be like this:

Available hours
Absence hours
Available customer hours
Agreement hours
Available hours project
Average price
Utilization agreements %

So, instead of dynamic rendering, I took the index of the array element and render the element this way:

<ul v-for="(row, rowIndex) in data.rows">
   <li>{{ row.cells[0].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[2].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[1].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[5].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[3].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[4].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[6].consultingBudgetHeadName }}</li>
</ul>

But I don't think this would be a good idea as index number can be changed at the database any time. So, what's the good way to achieve those?

CodeSandbox Demo

Do you want to print consultingBudgetHeadName field or value field in cells array? — cafertayyar
– cafertayyar, Commented Oct 12, 2022 at 12:05
valueMap. I used consultingBudgetHeadName in the post as simplicity so that it will be understandable. — user1896653
– user1896653, Commented Oct 12, 2022 at 12:06
"as index number can be changed at the database any time" not a good idea to not name columns then. There should be some kind of id for them in server response — Estus Flask
– Estus Flask, Commented Oct 12, 2022 at 12:12
There is id (consultingBudgetHeadId) by the way: codesandbox.io/s/… — user1896653
– user1896653, Commented Oct 12, 2022 at 12:15

Nikola Pavicevic · Accepted Answer · 2022-10-12 12:11:41Z

2

You can map your array and return it sorted with computed property:

const mappedCells = new Map([["Available hours", 1], ["Available customer hours", 3], ["Absence hours", 2], ["Available hours project", 5], ["Average price", 6], ["Agreement hours", 4], ["Utilization agreements %", 7]])
new Vue({
  el: "#demo",
  data() {
    return {
      "cells": [{"consultingBudgetHeadName": "Available hours", "value": 1806, "valueMap": "1 806"}, {"consultingBudgetHeadName": "Available customer hours", "value": 1773.2, "valueMap": "1 773,20"}, {"consultingBudgetHeadName": "Absence hours", "value": 32.8, "valueMap": "32,80"}, {"consultingBudgetHeadName": "Available hours project", "value": -7092.8, "valueMap": "-7 092,80"},  {"consultingBudgetHeadName": "Average price", "value": 0, "valueMap": "0"}, {"consultingBudgetHeadName": "Agreement hours", "value": 8866, "valueMap": "8 866"}, {"consultingBudgetHeadName": "Utilization agreements %", "value": 500, "valueMap": "500"}]
    }
  },
  computed: {
    sortedCells() {
      return this.cells.map(c => {
        c.nr = mappedCells.get(c.consultingBudgetHeadName)
        return c
      }).sort((a, b) => (a.nr > b.nr) ? 1 : -1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="(cell, i) in sortedCells" :key="i">
      {{ cell.consultingBudgetHeadName }}
   </li>
</div>

answered Oct 12, 2022 at 12:11

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

2 Comments

user1896653 Over a year ago

Looks neat solution. The array object I used in the post is 1D. But, in my actual scenario (i.e. in the CodeSandbox Demo), it's nested (inside another array Object rows). That won't be an issue hopefully. I will try implement your solution. May be, I need: this.data.rows.map(a => a.cells.map())?

Nikola Pavicevic Over a year ago

@user1896653 hey mate, you are right, access your array and map it. But if you have access to the back-end better solution will be to set order number there, so less work on the front :)

Mina · Accepted Answer · 2022-10-12 12:22:42Z

1

I think the better solution is to have an extra field in the database for index of the item, and then in the front end when you retrieve the data you can sort the list according to that field.

For example

 "cells": [
        {
          "consultingBudgetHeadName": "Available hours",
          "value": 1806,
          "valueMap": "1 806",
          "order": 1,
        },
        {
          "consultingBudgetHeadName": "Available customer hours",
          "value": 1773.2,
          "valueMap": "1 773,20",
          "order": 3,
        },
        {
          "consultingBudgetHeadName": "Absence hours",
          "value": 32.8,
          "valueMap": "32,80",
          "order": 2,
        },
        {
          "consultingBudgetHeadName": "Available hours project",
          "value": -7092.8,
          "valueMap": "-7 092,80",
          "order": 6,
        },
        {
          "consultingBudgetHeadName": "Average price",
          "value": 0,
          "valueMap": "0",
          "order": 4,
        },
        {
          "consultingBudgetHeadName": "Agreement hours",
          "value": 8866,
          "valueMap": "8 866",
          "order": 5,
        },
        {
          "consultingBudgetHeadName": "Utilization agreements %",
          "value": 500,
          "valueMap": "500",
          "order": 7,
        }
      ]

Then set a computed property for the sorted cells.

computed: {
  sortedCells() {
     return this.cells.sort((a, b) => a.order - b.order)
  }
}

edited Oct 12, 2022 at 12:22

answered Oct 12, 2022 at 12:03

Mina

17.8k3 gold badges24 silver badges39 bronze badges

3 Comments

user1896653 Over a year ago

Yeah, That can be a way. Do you have any examples of that? For example a dataset with order/index number. And then sort the list based on that?

Mina Over a year ago

@user1896653 Yes, I just update the answer, please check again.

user1896653 Over a year ago

Thanks, I got your idea

power-cut · Accepted Answer · 2023-02-08 22:17:02Z

0

You can put your list of sorted keys in an array and v-for over that instead.

<div v-for="a in all">
  <div v-for="key in presortedListOfKeys">
    {{a[key]}}
  </div>
</div>

answered Feb 8, 2023 at 22:17

power-cut

1,5681 gold badge21 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to render list with different order from array object in vue js?

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related