Javascript 合併 Json Object
使用 Javascript 合併 Json Object
Javascript 合併 Json Object
使用 JavaScript 將 2 份不同的 Json object 以識別欄位的值進行合併
先來看看第一個 JSON 的內容
1
2
3
4
5
6
[
{id:1,name:'aaa'},
{id:3,name:'bbb'},
{id:5,name:'ccc'},
{id:7,name:'ddd'}
]
先來看看第二個 JSON 的內容
1
2
3
4
5
6
7
[
{id:1,parameter1:'x', parameter2:'y', parameter3:'z'},
{id:3,parameter1:'u', parameter2:'v', parameter3:'w'},
{id:5,parameter1:'q', parameter2:'w', parameter3:'e'},
{id:7,parameter1:'xx', parameter2:'xx', parameter3:'xx'},
{id:9,name:'eee'}
]
合併後的結果
1
2
3
4
5
6
7
[
{"id":1,"name":"aaa","parameter1":"x","parameter2":"y","parameter3":"z"},
{"id":3,"name":"bbb","parameter1":"u","parameter2":"v","parameter3":"w"},
{"id":5,"name":"ccc","parameter1":"q","parameter2":"w","parameter3":"e"},
{"id":7,"name":"ddd","parameter1":"xx","parameter2":"xx","parameter3":"xx"},
{"id":9,"name":"eee"}
]
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var json1 = [{id:1,name:'aaa'},
{id:3,name:'bbb'},
{id:5,name:'ccc'},
{id:7,name:'ddd'}
];
var json2 = [{id:1,parameter1:'x', parameter2:'y', parameter3:'z'},
{id:3,parameter1:'u', parameter2:'v', parameter3:'w'},
{id:5,parameter1:'q', parameter2:'w', parameter3:'e'},
{id:7,parameter1:'xx', parameter2:'xx', parameter3:'xx'},
{id:9,name:'eee'}
];
function joinObjects() {
var idMap = {};
// Iterate over arguments
for(var i = 0; i < arguments.length; i++) {
// Iterate over individual argument arrays (aka json1, json2)
for(var j = 0; j < arguments[i].length; j++) {
var currentID = arguments[i][j]['id'];
if(!idMap[currentID]) {
idMap[currentID] = {};
}
// Iterate over properties of objects in arrays (aka id, name, etc.)
for(key in arguments[i][j]) {
idMap[currentID][key] = arguments[i][j][key];
}
}
}
// push properties of idMap into an array
var newArray = [];
for(property in idMap) {
newArray.push(idMap[property]);
}
return newArray;
}
joinObjects(json1, json2)
document.write(JSON.stringify(joinObjects(json1, json2)));
CodePen Sample
See the Pen Json Merge Sample by Benson (@BensonCho) on CodePen.
本文章以 CC BY 4.0 授權