JavaScript: merge multiple object arrays by index

Question

I wanted to merge multi-array of objects below

[{"genderid":1515},{"genderid":1516},{"genderid":1513}]

[{"modnameid":1515},{"modnameid":1516},{"modnameid":1514}]

to the desired output below

[
  {"genderid":1515,"modnameid":1515},
  {"genderid":1516,"modnameid":1516},
  {"genderid":1513,"modnameid":1514}
]

Majed Badawi · Accepted Answer · 2021-02-01 21:14:21Z

1

If you want to merge two arrays of objects according to the index:

Check which one of the two is greater than the other, and set each to first and second accordingly (first should be iterated over to guarantee the element at index won't be undefined)
Iterate over first using .map, and merge the two objects at each index

const mergeTwoArraysByIndex = (arr1=[], arr2=[]) => {

  // get larger of the two to iterate over
  let first = [], second = [];
  if(arr1.length > arr2.length) { first = arr1; second = arr2; }
  else { first = arr2; second = arr1; }
  
  // merge two arrays
  const merged = first.map((item, index) => ({ ...item, ...second[index] }));
  
  return merged;
}

console.log( 
  mergeTwoArraysByIndex(
    [{"genderid":1515},{"genderid":1516},{"genderid":1513}],
    [{"modnameid":1515},{"modnameid":1516},{"modnameid":1514}]
  )
);
console.log( 
  mergeTwoArraysByIndex(
    [{"genderid":1515},{"genderid":1516}],
    [{"modnameid":1515},{"modnameid":1516},{"modnameid":1514}]
  )
);
console.log( 
  mergeTwoArraysByIndex(
    [{"genderid":1515},{"genderid":1516},{"genderid":1513}],
    [{"modnameid":1515},{"modnameid":1516}]
  )
);

Update: If you want to merge multiple arrays in this fasion:

const mergeArraysByIndex = (arrays=[], merged=[], index=0) => {

  // stop when last array is reached
  if(index >= arrays.length) return merged;
  
  // get larger of the two to iterate over
  const arr1 = merged, arr2 = arrays[index] || [];
  let first = [], second = [];
  if(arr1.length > arr2.length) { first = arr1; second = arr2; } 
  else { first = arr2; second = arr1; }
  
  // merge two arrays
  merged = first.map((item, index) => ({ ...item, ...second[index] }) );
  
  return mergeArraysByIndex(arrays, merged, index+1);
}

console.log( 
  mergeArraysByIndex(
    [
      [{"genderid":1515},{"genderid":1516}],
      [{"modnameid":1515},{"modnameid":1516},],
      [{"userid":1515},{"userid":1516},{"userid":1514}]
    ]
  )
);
console.log( 
  mergeArraysByIndex(
    [
      [{"genderid":1515},{"genderid":1516}],
      [{"modnameid":1515},{"modnameid":1516},],
      [{"userid":1515},{"userid":1516},{"userid":1514}],
      [{"ageid":1515},{"ageid":1516},{"ageid":1514},{"ageid":1515}]
    ]
  )
);

edited Feb 1, 2021 at 21:14

answered Feb 1, 2021 at 20:39

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

5 Comments

Rizwan Patel Over a year ago

there is high possibility that there is would length issue in the implementation stage in my case scenarios, however this spot on solution position if length constraint was not there, is there any solution discarding length solutions ! thanks again

Majed Badawi Over a year ago

@RizwanPatel yes this should be handeled, answer updated

Rizwan Patel Over a year ago

thanks for package and considering the case scenarios , this should suffice for two array of objects which was my question .However just out of curiosity if we say more then two array to merge say for e.g 5-6 arrray to merge in same fashion how do we go about it reason for dynamic array gen is basically I am building bolierplate github.com/matt212/Nodejs_Postgresql_VanillaJS_Fastify/tree/…

Majed Badawi Over a year ago

@RizwanPatel I updated the answer with a possible approach to the problem you stated, out of curiosity as well :)

Rizwan Patel Over a year ago

thanks again for placing solutions for multi-array case scenarios you sir, @majed is awesome!

Collectives™ on Stack Overflow

JavaScript: merge multiple object arrays by index

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related