文章

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 授權