Map and merge two arrays in JavaScript

Question

I need to merge two arrays of different structures to one based on a field value matching to a field of type array.

Here is the example of first array

[{
    "id": "1",
    "name" : "one"
},{
    "id": "2",
    "name" : "two"
},{
    "id": "3",
    "name" : "three"
}]

And the example of the second array

    [{ num: [ '1', '5', '7' ], alph: 'AAA' },
     { num: [ '0', '2' ], alph: 'BBB' },
     { num: [ '-1', '3', '6' ], alph: 'CCC' }]

Expecting the output like

    [{
     "id": "1",
     "name": "one",
     "alph": "AAA"
 }, {
     "id": "2",
     "name": "two",
     "alph": "BBB"
 }, {
     "id": "3",
     "name": "three",
     "alph": "CCC"
 }]

What happened to the `id` array? Also what have you tried to get your output? — Tushar Shahi, Mar 16 '22 at 19:18
SO is not a coding service. Visit the [help center](https://stackoverflow.com/help), take the [tour](https://stackoverflow.com/tour) to see what and [How to Ask](https://stackoverflow.com/questions/how-to-ask). Show what you have tried and where you are stuck. When practical post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt, noting input and expected output. — pilchard, Mar 16 '22 at 19:20
also a duplicate: [Combine same-index objects of two arrays](https://stackoverflow.com/questions/34076624/combine-same-index-objects-of-two-arrays) — pilchard, Mar 16 '22 at 19:22
@pilchard, it not a duplicate, because it does not follows the same index merging (this looks like, but it isment to merge on `id`). — Nina Scholz, Mar 16 '22 at 19:29
@NinaScholz, I see no mention of merging by id in the question, and merging by index gives the expected result. The OP should clarify their question. Even if it is by id, there are myriad duplicates. — pilchard, Mar 16 '22 at 21:34
@pilchard, i was reading this: "*based on a field value matching to a field of type array*". — Nina Scholz, Mar 16 '22 at 21:47

score 1 · Answer 1 · answered Mar 16 '22 at 19:29

You could generate an object with all new properties grouped by id and then map the objects with additional properties, if exist.

const 
    data = [{ id: "1", name: "one" }, { id: "2", name: "two" }, { id: "3", name: "three" }],
    update = [{ id: [ '1', '5', '7' ], alph: 'AAA' }, { id: [ '0', '2' ], alph: 'BBB' }, { id: [ '-1', '3', '6' ], alph: 'CCC' }],
    ids = update.reduce((r, { id, ...o }) => {
        id.forEach(k => r[k] = { ...r[k], ...o });
        return r;
    }, {}),
    result = data.map(o => ({ ...o, ...ids[o.id] }));

console.log(result);

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

score 0 · Answer 2 · answered Mar 16 '22 at 19:31

This is a very contrived way to do this where knowledge of the structure is required and therefore brittle, but this works:

const idArr = [{
    "id": "1",
    "name" : "one"
},{
    "id": "2",
    "name" : "two"
},{
    "id": "3",
    "name" : "three"
}];

const numArr = [{ num: [ '1', '5', '7' ], alph: 'AAA' },
     { num: [ '0', '2' ], alph: 'BBB' },
     { num: [ '-1', '3', '6' ], alph: 'CCC' }];
     
function merge(arr1, arr2) {
  return arr1.map((item, i) => {
    item.alph = arr2[i].alph;
    return item;
  });
}

console.log(merge(idArr, numArr));

Map and merge two arrays in JavaScript

2 Answers2