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
– David Losert, Commented Aug 7, 2020 at 11:41
Familiarize yourself with how to access and process nested objects, arrays or JSON and use the available Object and Array methods. — Sebastian Simon
– Sebastian Simon, Commented Aug 7, 2020 at 11:45
i tried using concat() but it seem not getting expected output — Prince Shukla
– Prince Shukla, Commented Aug 7, 2020 at 11:49

Nikita Madeev · Accepted Answer · 2020-08-07 12:14:00Z

1

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 })));

answered Aug 7, 2020 at 12:14

Nikita Madeev

4,49012 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ram · Accepted Answer · 2020-08-08 07:06:13Z

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)

Sascha A. · Accepted Answer · 2020-08-07 13:00:18Z

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 · Accepted Answer · 2020-08-09 06:30:53Z

0

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]));

edited Aug 9, 2020 at 6:30

answered Aug 7, 2020 at 19:24

Ram

1171 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Mege multiple array object into single array object based on key

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related