js/reactjs - How do i construct an array from two sources?

Question

I have two arrays that i need to merge:

array 1:

[ { 'Issues in Version': 'PPW-1075', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1076', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1077', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1078', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1079', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1080', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1081', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1123', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1133', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1134', 'Issues In Progress': '' } ]

array 2:

 [{ 'Issues In Version': '', 'Issues In Progress': 'PPW-1123' },
  { 'Issues In Version': '', 'Issues In Progress': 'PPW-1133' },
  { 'Issues In Version': '', 'Issues In Progress': 'PPW-1134' } ]

How do i merge these arrays to give the following:

[ { 'Issues in Version': 'PPW-1075', 'Issues In Progress': 'PPW-1123' },
  { 'Issues in Version': 'PPW-1076', 'Issues In Progress': 'PPW-1133' },
  { 'Issues in Version': 'PPW-1077', 'Issues In Progress': 'PPW-1134' },
  { 'Issues in Version': 'PPW-1078', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1079', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1080', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1081', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1123', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1133', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1134', 'Issues In Progress': '' } ]

Possible duplicate of [How to merge two arrays in Javascript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — Mayank Shukla, Aug 11 '17 at 10:44
How come your resultant array has `'Issues in Version': 'PPW-1075'` value instead of being `'Issues in Version': ''` ? — Anurag Singh Bisht, Aug 11 '17 at 10:46
@AnuragSinghBisht I Didn't realize i have done that, thanks for pointing out — Callum Brankin, Aug 11 '17 at 11:15

Nina Scholz · Accepted Answer · 2017-08-11T10:57:42.983

Yocu could generate a new array with checking if the properties have a truthy value for matching properties.

var array1 =[ { 'Issues In Version': 'PPW-1075', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1076', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1077', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1078', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1079', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1080', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1081', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1123', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1133', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1134', 'Issues In Progress': '' } ],
    array2 = [{ 'Issues In Version': '', 'Issues In Progress': 'PPW-1123' }, { 'Issues In Version': '', 'Issues In Progress': 'PPW-1133' }, { 'Issues In Version': '', 'Issues In Progress': 'PPW-1134' } ],
    result = array1.map((o, i) => ({
        'Issues In Version': o['Issues In Version'] || ((array2[i] || {})['Issues In Version']) || '',
        'Issues In Progress': o['Issues In Progress'] || ((array2[i] || {})['Issues In Progress']) || ''
    }));
  
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Solution for any length arrays.

var array1 =[ { 'Issues In Version': 'PPW-1075', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1076', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1077', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1078', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1079', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1080', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1081', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1123', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1133', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1134', 'Issues In Progress': '' } ],
    array2 = [{ 'Issues In Version': '', 'Issues In Progress': 'PPW-1123' }, { 'Issues In Version': '', 'Issues In Progress': 'PPW-1133' }, { 'Issues In Version': '', 'Issues In Progress': 'PPW-1134' } ],
    result = [array1, array2].reduce((r, a) => (a.forEach((o, i) => {
        r[i] = r[i] || {};
        Object.keys(o).forEach(k => r[i][k] = r[i][k] || o[k] || '');
    }), r), []);

  
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Good dynamic solution that works for any kind, but i thing it's just "over doing it" :P Should we throw in babel compiler also? — Endless, Aug 11 '17 at 11:07
no, it would work with es5 as well, with some minor changes. — Nina Scholz, Aug 11 '17 at 11:10

Endless · Answer 2 · 2017-08-11T11:02:14.963

if you would like to keep the same array and just want to append new properties

var array1 = [{ 'Issues In Version': 'PPW-1075', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1076', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1077', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1078', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1079', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1080', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1081', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1123', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1133', 'Issues In Progress': '' }, { 'Issues In Version': 'PPW-1134', 'Issues In Progress': '' } ]
var array2 = [{ 'Issues in Version': '', 'Issues In Progress': 'PPW-1123' }, { 'Issues In Version': '', 'Issues In Progress': 'PPW-1133' }, { 'Issues In Version': '', 'Issues In Progress': 'PPW-1134' } ]

for (let i = 0, l = array2.length; i < l; i++) {
  array1[i]['Issues In Progress'] = array2[i]['Issues In Progress']
}

console.log(array1)

score 0 · Answer 3 · answered Aug 11 '17 at 11:34

What about this?

const first = [
  { 'Issues in Version': 'PPW-1075', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1076', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1077', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1078', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1079', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1080', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1081', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1123', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1133', 'Issues In Progress': '' },
  { 'Issues in Version': 'PPW-1134', 'Issues In Progress': '' }
];

const second = [
  { 'Issues In Version': '', 'Issues In Progress': 'PPW-1123' },
  { 'Issues In Version': '', 'Issues In Progress': 'PPW-1133' },
  { 'Issues In Version': '', 'Issues In Progress': 'PPW-1134' }
];

const merged = new Array(Math.max(first.length, second.length))
  .fill(null)
  .map((item, index) => ({
    'Issues in Version': index < first.length ? first[index]['Issues in Version'] : '',
    'Issues in Progress': index < second.length ? second[index]['Issues In Progress'] : ''
  }));

English Explanation

You create an array of length n, where n is the maximum of the 2 arrays' length. This is necessary, provided you cannot guarantee that the 1st array's length is equal or greater than the 2nd.
You fill the array with a placeholder value (null in this case) to be able to iterate over it.
You map the placeholder array to an array of the desired objects using each iteration's index i to take Issues in Version's value from the i-th item of the 1st array and Issues In Progress's value from the i-th item of the 2nd array. The ternary operator makes sure that in case the index exceeds the length of one the arrays, an empty string is used instead.

js/reactjs - How do i construct an array from two sources?

3 Answers3

English Explanation