配列オブジェクトをJavaScriptで1つの配列で更新する

Question

オブジェクト値を別の配列から更新するのが難しいです。

例：

mainArray = [ 
    { "name": "bob", "complete": "25" }, 
    { "name": "john", "complete": "50" }, 
    { "name": "mike", "complete": "75" },   
]; 

colorArray = ["#ff0000", "#00ff00", "#0000ff"]; 

私は、これらの値を組み合わせた新しい配列を作成する必要があります。

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

はどんなに私は何をすべきか、私はどちらかだけバック＃0000FFを取得していないか、まったく働いて何かを得ることはできません。失敗した試行：

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

ゴールを取り戻すことです。

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

これを行うための正しい方法は何ですか？

Answer 1

colorArrayのインデックスに基づいて、各人のcolorキーを設定するだけです。あなたはそれを変更することがあり

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

：Array.mapとObject.assignを使用して

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

Answer 2

より機能的なアプローチは、あなたが以下の不要なネストされたループを持って

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

のように見えます：

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