Adding items to an object array from another array

Question

I have an array like this:

data = [1, 2, 3, 4, 5]

and I have an array of objects like this:

obj = [{"Name":"ABC","Age":25,"Gender":"M"},
 {"Name":"DEF","Age":32,"Gender":"F"},
 {"Name":"PQR","Age":30,"Gender":"F"},
 {"Name":"XYZ","Age":30,"Gender":"F"}]

I need to push each element of the data array into each object of the array. My expected output is this:

obj = [{"Name":"ABC","Age":25,"Gender":"M", "Data":1}, 
 {"Name":"DEF","Age":32,"Gender":"F", "Data":2}, 
 {"Name":"PQR","Age":30,"Gender":"F", "Data":3}, 
 {"Name":"XYZ","Age":30,"Gender":"F", "Data":4}]

I tried like this:

for(let i = 0; i<data.length; i++){
 obj.push({data:data[i])
}

But that gave an incorrect result like this:

obj = [{"Name":"ABC","Age":25,"Gender":"M"},
 {"Name":"DEF","Age":32,"Gender":"F"}, 
 {"Name":"PQR","Age":30,"Gender":"F"},
 {"Name":"XYZ","Age":30,"Gender":"F"}, 
 {"Data":1},{"Data":2},{"Data":3},{"Data":4}]

I understand that this is because I am not iterating through array of object before pushing the items into it. But I am unable to iterate through data as well as obj together. Please help me solve the issue. Thanks in advance.

• VLAZ: "I am unable to iterate through data as well as obj together" really? for(let i =0; i < data.length; i++) { const d = data[i]; const o = obj[i]; }
• Barmar: push() is for adding new elements to an array, not for modifying elements that are already in an array.
• Barmar: obj[i].data = data[i]
• ikhvjs: As point out by @Barmar's comment above, you can have a look array.map(), something like const output = obj.map((o, i) => ({ ...o, Data: data[i] }));

Answer 1

There are multiple ways in achieving the expected output. Here is one of the ways, Loop through the array using Array.map and destructuring

const data = [{"Name":"ABC","Age":25,"Gender":"M"}, {"Name":"DEF","Age":32,"Gender":"F"},{"Name":"PQR","Age":30,"Gender":"F"},{"Name":"XYZ","Age":30,"Gender":"F"}];
const array = [1, 2, 3, 4, 5];
const formattedData = (data, array) => data.map((obj, i) => ( 
 {
 ...obj,
 Data: array[i]
 }
));
console.log(formattedData(data, array));

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

Answer 2

It can be solved by a spread operator. Please have a look as following codes.

obj = [{"Name":"ABC","Age":25,"Gender":"M"},
 {"Name":"DEF","Age":32,"Gender":"F"},
 {"Name":"PQR","Age":30,"Gender":"F"},
 {"Name":"XYZ","Age":30,"Gender":"F"}]
data = [1,2,3,4,5]
newObj = obj.map((item, i)=>({...item, Data: data[i]}));
console.log(newObj);

Answer 3

Given that the length of the 2 arrays are the same:

for (let i = 0; i < data.length; i++) {
 obj[i].Data = data[i];
}

Answer 4

let result = obj.map((e,i) => ({...e, "Data":data[i]}));
console.log(result);

Answer 5

const data = [{"Name":"ABC","Age":25,"Gender":"M"}, {"Name":"DEF","Age":32,"Gender":"F"},{"Name":"PQR","Age":30,"Gender":"F"},{"Name":"XYZ","Age":30,"Gender":"F"}]; const array = [1, 2, 3, 4, 5];

Few things to consider here is we need new object where the length remains same as data and array. With the help of map function , we can get eachData and index of the eachData and we can mutate the object by adding Data in this case.

We need to add closing bracket as Rest parameter must be last formal parameter forgetting which would throw syntax error for the same

const formattedData = (data,array) => data.map((eachData,i)=> ({...eachData,Data:array[i]}))