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
– Kristian Vitozev, Commented Sep 16, 2015 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
– Ali, Commented Sep 16, 2015 at 13:36
Can you provide an example of the data and your expected result? What have you tried so far? — Felix Kling
– Felix Kling, Commented Sep 16, 2015 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
– Ali, Commented Sep 16, 2015 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
– Felix Kling, Commented Sep 16, 2015 at 13:45

Community · Accepted Answer · 2017-05-23 12:16:19Z

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, 2017 at 12:16

CommunityBot

11 silver badge

answered Sep 16, 2015 at 14:07

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

3 Comments

Nafiu Lawal Over a year ago

The JS ForEach is very inefficient. Use the array map answer below instead

Felix Kling Over a year ago

@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.

Nafiu Lawal Over a year ago

@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. morioh.com/p/b2d058745cb8

darkhipo · Accepted Answer · 2020-10-02 23:55:37Z

7

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" }]

answered Oct 2, 2020 at 23:55

darkhipo

1,4041 gold badge15 silver badges19 bronze badges

Comments

Arash R · Accepted Answer · 2015-09-16 14:27:16Z

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, 2015 at 14:27

answered Sep 16, 2015 at 13:36

Arash R

1414 bronze badges

1 Comment

Ali Over a year ago

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

David Buck · Accepted Answer · 2020-04-13 09:36:35Z

0

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

edited Apr 13, 2020 at 9:36

David Buck

3,87840 gold badges54 silver badges73 bronze badges

answered Apr 13, 2020 at 8:48

Vlad Nussem

12 bronze badges

Collectives™ on Stack Overflow

Add property/index to each element in an array

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related