angularjs按屬性值組合2個對象

Question

我有2個不同的對象數組，我想根據「id」值進行合併。

所以，如果我的第一個數組是這樣的：

[ 
    { 
    "id": "75318408571184", 
    "component": "textInput", 
    "index": 0, 
    "label": "Text", 
    "description": "description", 
    "placeholder": "placeholder", 
    }, 
    { 
    "id": "9463537670672", 
    "component": "textArea", 
    "index": 1, 
    "label": "Paragraph", 
    "description": "description", 
    "placeholder": "placeholder" 
    } 

]

和我的第二個看起來是這樣的：

[ 
    { 
    "id": "75318408571184", 
    "value": "value1" 
    }, 
    { 
    "id": "9463537670672", 
    "value": "value2" 
    } 

]

我想獲取這組對象：

[ 
    { 
    "id": "75318408571184", 
    "component": "textInput", 
    "index": 0, 
    "label": "Text", 
    "description": "description", 
    "placeholder": "placeholder", 
    "value": "value1" 
    }, 
    { 
    "id": "9463537670672", 
    "component": "textArea", 
    "index": 1, 
    "label": "Paragraph", 
    "description": "description", 
    "placeholder": "placeholder", 
    "value": "value2" 
    } 

]

是有一個整潔的方式來做到這一點的角度或JavaScript而不通過陣列循環？

Answer 1

試試這個：

var result = firstArray.map(function(item) { 
    var second = secondArray.find(function(i) { 
     return item.id === i.id; 
    }); 
    return second ? Object.assign(item, second) : item; 
}); 
console.log(result); 

Array.prototype.map()的道理也適用於的firstArray每個項目的功能，並返回修改後的值新的數組。

Object.assign()是將second對象的屬性複製到上述代碼中的item對象的函數。

Answer 2

在普通的JavaScript，你可以使用Array.prototype.forEach()和Array.prototype.some()

var obj1 = [{ "id": "75318408571184", "component": "textInput", "index": 0, "label": "Text", "description": "description", "placeholder": "placeholder", }, { "id": "9463537670672", "component": "textArea", "index": 1, "label": "Paragraph", "description": "description", "placeholder": "placeholder" }], 
 
    obj2 = [{ "id": "75318408571184", "value": "value1" }, { "id": "9463537670672", "value": "value2" }]; 
 

 
obj2.forEach(function (a) { 
 
    obj1.some(function (b) { 
 
     if (a.id === b.id) { 
 
      b.value = a.value; 
 
      return true; 
 
     } 
 
    }); 
 
}); 
 
document.write('<pre>' + JSON.stringify(obj1, 0, 4) + '</pre>');

另一種可能性是建立一個哈希表temp，然後再直接操作的項目。

var obj1 = [{ "id": "75318408571184", "component": "textInput", "index": 0, "label": "Text", "description": "description", "placeholder": "placeholder", }, { "id": "9463537670672", "component": "textArea", "index": 1, "label": "Paragraph", "description": "description", "placeholder": "placeholder" }], 
 
    obj2 = [{ "id": "75318408571184", "value": "value1" }, { "id": "9463537670672", "value": "value2" }], 
 
    temp = {}; 
 

 
obj1.forEach(function (a, i) { 
 
    temp[a.id] = i; 
 
}); 
 
obj2.forEach(function (a) { 
 
    obj1[temp[a.id]].value = a.value; 
 
}); 
 
document.write('<pre>' + JSON.stringify(obj1, 0, 4) + '</pre>');

Answer 3

以上答案已經很好了。但是如果你想看看其他一些庫，你可以看看這個。 loadash merge

var object = { 
    'fruits': ['apple'], 
    'vegetables': ['beet'] 
}; 

var other = { 
'fruits': ['banana'], 
'vegetables': ['carrot'] 
}; 

_.merge(object, other, function(a, b) { 
    if (_.isArray(a)) { 
    return a.concat(b); 
} 
}); 

// → { 'fruits': ['apple', 'banana'], 'vegetables': ['beet', 'carrot'] }