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.

Answer 1

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.

Answer 2

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

Answer 3

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;
});