Update array objects with a single array in JavaScript

Question

I'm having difficulty updating object values from a separate array.

Example:

mainArray = [
 { "name": "bob", "complete": "25" },
 { "name": "john", "complete": "50" },
 { "name": "mike", "complete": "75" }, 
];
colorArray = ["#ff0000", "#00ff00", "#0000ff"];

I need to create a new Array that combines these values.

for (i = 0, ilen = mainArray.length; ilen > i; i++) {
 newArray.push({
 name: mainArray[i].name,
 complete: mainArray[i].complete,
 color: '',
 });
}

No matter what I do, I either only get #0000ff back or can't get anything working at all. Failed attempt:

for (j = 0, jlen = newArray.length; jlen > j; j++) {
 for (k = 0, km = colorArray.length; km > k; k++) {
 newArray[j].color = colorArray[k];
 }
}

Goal is to get back:

newArray = [
 { "name": "bob", "complete": "25", "color": "#ff0000" },
 { "name": "john", "complete": "50", "color": "#00ff00" },
 { "name": "mike", "complete": "75", "color": "#0000ff" } 
];

What is the correct way to do this?

Answer 1

Just set the color key of each person based on the index of the colorArray.

var mainArray = [
 { "name": "bob", "complete": "25" },
 { "name": "john", "complete": "50" },
 { "name": "mike", "complete": "75" }, 
];
var colorArray = ["#ff0000", "#00ff00", "#0000ff"];
var newArray = [];
for (var i = 0; i < mainArray.length; i++) {
 newArray.push({
 name: mainArray[i].name,
 complete: mainArray[i].complete,
 color: colorArray[i]
 });
}

• DusmaN: That works, thank you. I still don't understand how JavaScript "loops" through my array of colors by index in this circumstance. What should I be looking at in documentation/references?
• Felix Guo: When you use a loop with an index like i, don't think about it as looping through the array, but think about it as looping through a series of values. In this case, the first time through the loop, i is 0, then 1, then 2, then stops because the comparison 3 < mainArray.length fails. Knowing that i is 0, 1, and 2, you can see that you can access the first element of mainArray with mainArray[i], but also the first element of colorArray with colorArray[i]. We just join the first element of main and color array, then join the second, etc.
• m0meni: @FelixGuo great explanation
• DusmaN: I must have misunderstood how for loops work then. I appreciate the explanation.

Answer 2

A more functional approach using Array.map and Object.assign looks like

var mainArray = [
 { "name": "bob", "complete": "25" },
 { "name": "john", "complete": "50" },
 { "name": "mike", "complete": "75" }, 
];
var colorArray = ["#ff0000", "#00ff00", "#0000ff"];
var newArray = mainArray.map((x, i) =>
 Object.assign({}, x, {color: colorArray[i]})
)
 
console.log(newArray);

Answer 3

You have an unnecessary nested loop below:

for (j = 0, jlen = newArray.length; jlen > j; j++) {
 for (k = 0, km = colorArray.length; km > k; k++) {
 newArray[j].color = colorArray[k];
 }
}

You may change it to :

for (j = 0, jlen = newArray.length; jlen > j; j++) {
 newArray[j].color = colorArray[j];
}