js merge array of objects

[xgqfrms]

js merge array of objects

https://www.cnblogs.com/xgqfrms/p/14570849.html

Object.assign({}, obj1, obj2);

Object.assign([], arr1, arr2);

[xgqfrms]

https://github.com/xgqfrms/ES6

https://es6.xgqfrms.xyz/

https://javascript.xgqfrms.xyz/

[xgqfrms]

arr1 = new Array({name: "lang", value: "English"},
                     {name: "age", value: "18"});
(2) [{…}, {…}]
arr2 = new Array({name : "childs", value: '5'},
                     {name: "lang", value: "German"});
(2) [{…}, {…}]
[...arr1, ...arr2]
(4) [{…}, {…}, {…}, {…}]0: {name: "lang", value: "English"}1: {name: "age", value: "18"}2: {name: "childs", value: "5"}3: {name: "lang", value: "German"}length: 4__proto__: Array(0)

map = new Map();
Map(0) {}

for(obj of [...arr1, ...arr2]) {
  if(!map.has(obj.name)) {
    map.set(obj.name, obj);
  } else {
    map.set(obj.name, {
      ...map.get(obj.name),
      ...obj,
    });
  }
}
Map(3) {"childs" => {…}, "lang" => {…}, "age" => {…}}[[Entries]]0: {"childs" => Object}1: {"lang" => Object}2: {"age" => Object}size: (...)__proto__: Map
arr4 = map.values();
MapIterator {{…}, {…}, {…}}
arr4 = [...map.values()];
(3) [{…}, {…}, {…}]0: {name: "childs", value: "5"}1: {name: "lang", value: "German"}2: {name: "age", value: "18"}length: 3__proto__: Array(0)

https://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects/41919138

[xgqfrms]

https://www.samanthaming.com/tidbits/49-2-ways-to-merge-arrays/

https://reactgo.com/javascript-merge-array-objects-key/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#array_literals

[xgqfrms]

arr1.concat(arr2);

[xgqfrms]

https://stackoverflow.com/a/66766965/5934465

// no need new Array constructor, just using an array literal
const arr1 = [{name: "lang", value: "English"}, {name: "age", value: "18"}];
const arr2 = [{name: "childs", value: '5'}, {name: "lang", value: "German"}];

// 1. create a map
const map = new Map();

// 2. concat array
// arr1.concat(arr2) === [...arr1, ...arr2]
const arr3 = [...arr1, ...arr2];

// 3. for ... of, iterator array
for(const obj of arr3) {
  if(!map.has(obj.name)) {
    // add
    map.set(obj.name, obj);
  } else {
    // update
    map.set(obj.name, {
      ...map.get(obj.name),
      ...obj,
    });
  }
}

// 4. get new merged unqiue array
const arr4 = [...map.values()];

console.log(`result array =`, JSON.stringify(arr4, null, 4));

/*
result array = [
    {
        "name": "lang",
        "value": "German"
    },
    {
        "name": "age",
        "value": "18"
    },
    {
        "name": "childs",
        "value": "5"
    }
]
*/

[xgqfrms]

refs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#array_literals

[xgqfrms]

id

arr1 =[
  {id:1,name:"sai"},
  {id:2,name: "King"}
];
(2) [{…}, {…}]
arr2 = [
    {id:1,age:23},
    {id:2,age:24}
];
(2) [{…}, {…}]
// 1. create a map
const map = new Map();

// 2. concat array
// arr1.concat(arr2) === [...arr1, ...arr2]
const arr3 = [...arr1, ...arr2];

// 3. for ... of, iterator array
for(const obj of arr3) {
  if(!map.has(obj.id)) {
    // add
    map.set(obj.id, obj);
  } else {
    // update
    map.set(obj.id, {
      ...map.get(obj.id),
      ...obj,
    });
  }
}

// 4. get new merged unqiue array
const arr4 = [...map.values()];

console.log(`result array =`, JSON.stringify(arr4, null, 4));
VM208:25 result array = [
    {
        "id": 1,
        "name": "sai",
        "age": 23
    },
    {
        "id": 2,
        "name": "King",
        "age": 24
    }
]

https://reactgo.com/javascript-merge-array-objects-key/