Add id to array of objects

Question

I have an array of objects. How do I add an id key to them starting from 1.

[
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
]

So, it will be like

[
{
    color: "red",
    value: "#f00",
    id: 1
},
{
    color: "green",
    value: "#0f0",
    id: 2
},
{
    color: "blue",
    value: "#00f",
    id: 3
},
{
    color: "cyan",
    value: "#0ff",
    id: 4
},
{
    color: "magenta",
    value: "#f0f",
    id: 5 
},
{
    color: "yellow",
    value: "#ff0",
    id: 6
},
{
    color: "black",
    value: "#000",
    id: 7
}
]

I tried using forEach but it was returning the id as the length - 1 value for all the objects inside the array.

I have a large number of objects and can use lodash too.

Can you post how you attempted your forEach loop so we can explain where you went wrong? This will benefit you, and others that come with the same issue, later. — Matt, Apr 25 '18 at 13:21
Did you check this: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Thomas Sablik, Apr 25 '18 at 13:46

score 13 · Accepted Answer · answered Apr 25 '18 at 13:12

You could use Array#forEach for this. The second argument of the callback refers to the index of the element. So you can assign the ID as index + 1.

const source = [{
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
];

source.forEach((item, i) => {
  item.id = i + 1;
});

console.log(source);

score 6 · Answer 2 · answered Apr 25 '18 at 13:12

You can use .forEach() to iterate over array elements and add id:

data.forEach((o, i) => o.id = i + 1);

Demo:

let data = [{
    color: "red",
    value: "#f00"
}, {
    color: "green",
    value: "#0f0"
}, {
    color: "blue",
    value: "#00f"
}, {
    color: "cyan",
    value: "#0ff"
}, {
    color: "magenta",
    value: "#f0f"
}, {
    color: "yellow",
    value: "#ff0"
}, {
    color: "black",
    value: "#000"
}];

data.forEach((o, i) => o.id = i + 1);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 3 · Answer 3 · answered Apr 25 '18 at 13:13

The simples solution would be to use map function

let data = [
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
]

data = data.map((x, i) => {
  x.id = i + 1
  return x
})

console.log(data)

score 3 · Answer 4 · answered Apr 25 '18 at 13:14

You can use the map() function to iterate over your array of objects.

n is each of your objects and you can set the id value inside the map.

Hope this helps :)

let arr = [{
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
]

let i = 0;
arr.map(n => {
  n['id'] = i;
  i++;
})

  console.log(arr);

score 2 · Answer 5 · edited Jun 20 '20 at 09:12

ES6

You can use forEach() to get the required result.

const arr =[{color: "red",value: "#f00"},{color: "green",value: "#0f0"},{color: "blue",value: "#00f"},{color: "cyan",value: "#0ff"},{color: "magenta",value: "#f0f"},{color: "yellow",value: "#ff0"},{color: "black",value: "#000"}];

arr.forEach((o,i)=>o.id=i+1);
console.log(arr);

.as-console-wrapper {max-height: 100% !important;top: 0;}

You can also use map() to get the required result.

DEMO

const arr =[{color: "red",value: "#f00"},{color: "green",value: "#0f0"},{color: "blue",value: "#00f"},{color: "cyan",value: "#0ff"},{color: "magenta",value: "#f0f"},{color: "yellow",value: "#ff0"},{color: "black",value: "#000"}];


console.log(arr.map((o,i)=>Object.assign(o,{id:i+1})));

.as-console-wrapper {max-height: 100% !important;top: 0;}

score 2 · Answer 6 · answered Aug 12 '20 at 13:43

2

  source.map((s, i)=> s.id = i+1); 
   console.log(source)

answered Aug 12 '20 at 13:43

Naim Blg

131
1
2
12

5

Please include a textual explanation of how this solves the problem in the question. It is best to void posting "code only" answers. – bad_coder Aug 13 '20 at 02:05

score 1 · Answer 7 · answered Apr 25 '18 at 13:43

No need for complex function and logic. Simply loop it over forEach which will also give you the index of each object in the array and assign that index+1 value to the id property of the object.

var arr = [
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
];

arr.forEach((item, index)=>{
 item.id = index+1;
});
console.log(arr);

Ehsan · Answer 8 · 2019-04-30T07:29:53.610

when i use this solutions my ids get one number like this:

list = [ {
    color: "red",
    value: "#f00",
    id: 0
}, {

    color: "green",
    value: "#0f0",
    id: 4
},{
    color: "blue",
    value: "#00f",
    id: 4
},{
    color: "cyan",
    value: "#0ff",
    id: 4
},{
    color: "black",
    value: "#000",
    id: 4
}]

my code is this:

let i = 0;
list.map(n => {
        n['id'] = i;
        i++;
});

score 0 · Answer 9 · answered Jun 09 '21 at 07:35

You can use filter() to remove duplicate and reduce() to achieve the desired output.

const colorArray = [
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

const result = colorArray
    .filter((a, i, x) => x.findIndex((t) => t.color === a.color) === i)
    .reduce((agg, item, index) => {
        item.id = index + 1;
        agg.push(item);
        return agg;
    }, []);

console.log(result);

Add id to array of objects

9 Answers9

ES6

Linked