Mege multiple array object into single array object based on key

Question

I have an array of objects of the structure coming from server response of iterated array object like as sample

var arrObj1  = [
    {"id":"1","value":21, "value1":13},
    {"id":"2","value":21, "value1":13 },
    ......n
    ]; 

var arrObj2 = [
    {"id":"1","value3":21, "value14":13},
    {"id":"2","value3":21, "value4":13 },
    ......n
    ]; 

var arrObj3 = [
    {"id":"1","value5":21, "value6":13},
    {"id":"2","value5":21, "value6":13 },
    ......n
    ];

But now I want to append the array values inot single new array according to key following structure of as iterated values of above array Expected Output:

var finalObj = [
        {
            "id" :  1
            "value" : 21,
            "value1" : 13,
            "value3" : 21,
            "value4" : 13,
            "value5" : 21,
            "value6" : 13,
        },
        {
            "id" :  2
            "value" : 21,
            "value1" : 13,
            "value3" : 21,
            "value4" : 13,
            "value5" : 21,
            "value6" : 13,
        },
        .....n

];

Hi and welcome to StackOerflow. Could you provide some more information about what you have tried already? What did not work? What error messages did you encounter? I am asking because it currently seems like you want others to do the coding work for you, which is not really the purpose of StackOverflow :) — David Losert, Aug 07 '20 at 11:41
Look away to [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) — Nikita Madeev, Aug 07 '20 at 11:43
Familiarize yourself with [how to access and process nested objects, arrays or JSON](https://stackoverflow.com/q/11922383/4642212) and use the available [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods_of_the_Object_constructor) and [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods) methods. — Sebastian Simon, Aug 07 '20 at 11:45
i tried using concat() but it seem not getting expected output — Prince Shukla, Aug 07 '20 at 11:49

score 1 · Answer 1 · edited Aug 08 '20 at 07:06

Push you arrays to a new array (you have to have your sub arrays in other list to loop through them) and then use flat, after that group your object according to the id property

var arrObj1 = [{
    "id": "1",
    "value": 21,
    "value1": 13
  },
  {
    "id": "2",
    "value": 21,
    "value1": 13
  },
];

var arrObj2 = [{
    "id": "1",
    "value3": 21,
    "value14": 13
  },
  {
    "id": "2",
    "value3": 21,
    "value4": 13
  },
];

var arrObj3 = [{
    "id": "1",
    "value5": 21,
    "value6": 13
  },
  {
    "id": "2",
    "value5": 21,
    "value6": 13
  },
];


const input = [];
input.push(arrObj2, arrObj3);
const preResult = input.flat();
result = preResult.reduce((acc, x) => {
  const index = acc.findIndex(y => y.id === x.id)
  if (index >= 0) {
    acc[index] = {
      ...acc[index],
      ...x
    }

  } else {
    acc.push(x)
  }
  return acc;
}, arrObj1)

console.log(result)

score 1 · Answer 2 · answered Aug 07 '20 at 12:14

You can use reduce for concated arrays

const arrObj1 = [
    { id: '1', value: 21, value1: 13 },
    { id: '2', value: 21, value1: 13 },
];
const arrObj2 = [
    { id: '1', value3: 21, value14: 13 },
    { id: '2', value3: 21, value4: 13 },
];
const arrObj3 = [
    { id: '1', value5: 21, value6: 13 },
    { id: '2', value5: 21, value6: 13 },
];

const result = [...arrObj1, ...arrObj2, ...arrObj3].reduce(
    (acc, { id, ...rest }) => ({ ...acc, [id]: acc[id] ? { ...acc[id], ...rest } : { ...rest } }),
    {},
);

console.log(Object.entries(result).map(([id, data]) => ({ id, ...data })));

Sascha · Answer 3 · 2020-08-07T13:00:18.037

You can iterate over array-length and push here for every entry 1 entry to the result. For getting this entry take a new object with the id and iterate over all (3 or perhaps more) arrays. For every array take the i-th entry and push for every key an entry with key:value (except for the key id itself).

Remark: You can use as much arrays you want and every object could contain as much value-prperties as you need. The only restriction is that every array has the same count of objects.

var arrObj1  = [
    {"id":"1","value":21, "value1":13},
    {"id":"2","value":21, "value1":13 }
    ]; 

var arrObj2 = [
    {"id":"1","value3":21, "value4":13},
    {"id":"2","value3":21, "value4":13 }
    ]; 

var arrObj3 = [
    {"id":"1","value5":21, "value6":13},
    {"id":"2","value5":21, "value6":13 }
    ]; 
    
let result =[];
let arrayAll = [arrObj1, arrObj2, arrObj3];

for (let i=0; i<arrayAll[0].length; i++) {

  let obj = arrayAll[0][i];
  let res = { id: obj.id};

  
  for (let j=0; j<arrayAll.length; j++) {
      let obj = arrayAll[j][i];
      Object.keys(obj).forEach(key => {
          if (key!='id') res[key] = obj[key];
      })
  }
  result.push(res);
}
console.log(result);

Ram · Answer 4 · 2020-08-09T06:30:53.267

Since you are using id to merge multiple objects, Map is one of the good option to merge.

let arrObj1  = [
    {"id":"1","value":21, "value1":13},
    {"id":"2","value":21, "value1":13 },
    ]; 

let arrObj2 = [
    {"id":"1","value3":21, "value14":13},
    {"id":"2","value3":21, "value4":13 },
    ]; 

let arrObj3 = [
    {"id":"1","value5":21, "value6":13},
    {"id":"2","value5":21, "value6":13 },
    ]; 

let mergedArray = [...arrObj1,...arrObj2,...arrObj3].reduce((acc,curr) =>{
    if(acc.has(curr.id)){
      acc.set(curr.id,  {...acc.get(curr.id),...curr});
    }else{
    acc.set(curr.id,curr);
    }
  return acc;
},new Map())
console.log(Array.from(mergedArray,x=>x[1]));

Mege multiple array object into single array object based on key

4 Answers4