Add property/index to each element in an array

Question

I call a webservice that returns an array of objects:

$.ajax({
  dataType: "json",
  url: "WebServices/FetchMenu.aspx?P=0&L=2&mt=1",
  //data: data,
  success: function (data) {
    var foo = data;
  }
});

This is the response:

[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    }
]

I want add a property row_number to each element which contains the current index of the element in the array.

I need this because I am changing the order of the elements later on but want to be able to identify the original position of an element.

What you mean by row number? You have result set and you want to add additional property to each single row? — Kristian Vitozev, Sep 16 '15 at 13:35
becuase i run the code in my page that foo .push(foo .shift()); it change the order of json varible and i want to know witch elemnt is 1st in foo — Ali, Sep 16 '15 at 13:36
Can you provide an example of the data and your expected result? What have you tried so far? — Felix Kling, Sep 16 '15 at 13:38
@Felix Kling : its a simple json varible ...the main question is if i shift and then push some elment in foo, the order of array is change and after run that code the element that was 1st in foo is now last elemnt in foo — Ali, Sep 16 '15 at 13:43
So you don't want to add a property to `foo` but to all objects *in* `foo`? Or just to the first one? An example would clarify a lot. — Felix Kling, Sep 16 '15 at 13:45
@Felix Kling : here example ...i wat to add row number to each element dynamicly ...if do that every time i change order of element in foo ican find orginal 1st elemet — Ali, Sep 16 '15 at 13:54
I rephrased the question so that it may become more valuable to other visitors as well. — Felix Kling, Sep 16 '15 at 14:15

score 12 · Accepted Answer · edited May 23 '17 at 12:16

12

There is nothing really special to do. Simply iterate over the array and add the property to each element:

for (var i = 0; i < foo.length; i++) {
  foo[i].row_number = i;
}

// or with forEach

foo.forEach(function(row, index) {
  row.row_number = index;
});

See Access / process (nested) objects, arrays or JSON for more general information about nested data structures in JavaScript.

edited May 23 '17 at 12:16

Community

1
1

answered Sep 16 '15 at 14:07

Felix Kling

795,719
175
1,089
1,143

The JS ForEach is very inefficient. Use the array map answer below instead – Nafiu Lawal Feb 25 '21 at 01:04
@NafiuLawal: How did you come to the conclusion that it's inefficient? On the surface, the map solution seems less efficient since it creates a new object for every element. Of course there are valid reasons for wanting to create a copy of the data instead of mutating the existing data. – Felix Kling Feb 25 '21 at 08:08
@felixKing It is inefficient for this use case because he is making changes to the array. In such situations, the map solution is a more efficient solution. I know the author of this post below is not an authority on this but he puts it better than me here. https://morioh.com/p/b2d058745cb8 – Nafiu Lawal Feb 26 '21 at 13:22

score 7 · Answer 2 · answered Oct 02 '20 at 23:55

You could also use map in case you want to keep the old object around, or wanted to do it in a call chain not modifying an existing array.

const oldArray = [{a: 'Andy'}, {b: 'Betty'}, {c: 'Charlie'}];
const newArray = oldArray.map((item, index) => ({index, ...item}));
console.log(newArray);
// Array [Object { index: 0, a: "Andy" }, Object { index: 1, b: "Betty" }, Object { index: 2, c: "Charlie" }]

Arash R · Answer 3 · 2015-09-16T14:27:16.590

2

If foo is one object you can do

foo.Row_Number

if is list you can use $.each and do the same for each object.

$.each(obj, function (index) {
    this.row_number = index + 1;
});

edited Sep 16 '15 at 14:27

answered Sep 16 '15 at 13:36

Arash R

141
4

if i run the code foo.push(foo.shift()); , foo is shift and push item and foo.Row_Number is change every time i call that code...then this is not solution – Ali Sep 16 '15 at 13:41

score 0 · Answer 4 · edited Apr 13 '20 at 09:36

0

let index = 0;
items.forEach((item) => (item.index = index++));

edited Apr 13 '20 at 09:36

David Buck

3,752
35
31
35

answered Apr 13 '20 at 08:48

Vlad Nussem

1
2

Add property/index to each element in an array

4 Answers4