assign an ID in each object of array

Question

I have a use case whereby sequential numbers need to be displayed in a table of data in the UI of an app, beginning at 1. The app is built using Vue and Buefy for the UI component library. Here is a screenshot of some sample data in such a table:

This needs to have a third column added and should display 1 in the first row and 2 in the second row.

I looked in the Buefy docs to see if their table component has built-in capability to do this but didn't see anything that fit. If that is the case, the data passed to the table component will need to provide it.

Since the format of the data passed to the table component is an array of objects I was thinking there might be a way to use each object's index, incremented by 1, for this purpose. But I'm not sure how to get this:

const data = [
    { color: 'blue', size: 'large', height: 'tall' },
    { color: 'green', size: 'medium', height: 'short' },
    { color: 'purple', size: 'small', height: 'average' }
];

to be this:

const data = [
    { id: '1', color: 'blue', size: 'large', height: 'tall' },
    { id: '2', color: 'green', size: 'medium', height: 'short' },
    { id: '3', color: 'purple', size: 'small', height: 'average' }
];

I tried the following but it does not give the desired outcome:

console.log([...data, ...Object.keys(data)];

How can the desired end result be achieved? I'm looking for a simple approach, if possible.

Also, I was concerned about what happens if an element gets removed from the original array of objects...would that mess up the sequential numbering that's based on the index number? I tested that situation by executing data.splice(0,1); but examining the results in the console, the objects appear to get re-indexed and therefore it shouldn't be an issue. Unless someone knows otherwise.

let newdata = data.map((x,i) => ({id : `${i+1}`, ...x})). But yes of course, if you later delete an element, you won't have a sequential numbering. But why would that be a problem? That's the exact purpose of an id: to identify an object. If your ids change how would they identifiy a specific object over the course of time? — derpirscher
– derpirscher, Commented Feb 5, 2022 at 21:56
It's not truly an ID. It's for the user to see each line in the table numbered sequentially. Maybe rowNumber would be a better name for it than id. — knot22
– knot22, Commented Feb 5, 2022 at 22:04

Nikola Pavicevic · Accepted Answer · 2022-02-05 22:14:37Z

1

If I understood you correctly try with index:

new Vue({
  el: '#demo',
  data() {
    return {
      items: [
        { color: 'blue', size: 'large', height: 'tall' },
        { color: 'green', size: 'medium', height: 'short' },
        { color: 'purple', size: 'small', height: 'average' }
      ]
    }
  },
  methods: {
    del(i) {
      this.items.splice(i, 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(item, i) in items" :key="i">
    <div>{{ i+1 }} - {{ item.color }}</div>
    <button @click="del(i)">delete</button>
  </div>
</div>

answered Feb 5, 2022 at 22:14

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

assign an ID in each object of array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related