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?

m0meni · Accepted Answer · 2017-07-18 00:55:53Z

4

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

edited Jul 18, 2017 at 0:55

m0meni

16.5k18 gold badges88 silver badges149 bronze badges

answered Jul 18, 2017 at 0:47

Felix Guo

2,71818 silver badges21 bronze badges

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

4 Comments

DusmaN Over a year ago

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 Over a year ago

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 Over a year ago

@FelixGuo great explanation

DusmaN Over a year ago

I must have misunderstood how for loops work then. I appreciate the explanation.

m0meni · Accepted Answer · 2017-07-18 00:51:25Z

0

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

answered Jul 18, 2017 at 0:51

m0meni

16.5k18 gold badges88 silver badges149 bronze badges

Comments

user8282131 · Accepted Answer · 2017-07-18 02:19:19Z

0

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

answered Jul 18, 2017 at 2:19

user8282131

464 bronze badges

Collectives™ on Stack Overflow

Update array objects with a single array in JavaScript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related