Merge and concat two arrays of objects - JS

Question

I have two array of objects and I want to merge them based on different properties and also concat if something doesnt exist in the list.

This is what I have:

const data1 = [{
  name: 'A',
  id: 1
}, {
  name: 'B',
  id: 2
}]

const data2 = [{
  city: 'X',
  rowID: 1
}, {
  city: 'Y',
  rowID: 2
}, {
  city: 'Z',
  rowID: 3
}]

const result = _.map(data1, function(p) {
  return _.merge(
    p,
    _.find(data2, {
      rowID: p.id
    })
  )
})

console.log(result)

//Expected Result
/**[
  {
    "name": "A",
    "id": 1,
    "city": "X",
    "rowID": 1
  },
  {
    "name": "B",
    "id": 2,
    "city": "Y",
    "rowID": 2
  },
  {
    "name": "",
    "id": "",
    "city": 'Z',
    "rowID": 3
  }
]*/

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Please advice.

Nina Scholz · Accepted Answer · 2021-01-20 19:42:34Z

2

You could collect the merged object with a Map and get the values.

const
    merge = data => {
        const
            pattern = {},
            map = new Map;

        data.forEach(([objects, key]) => {
            Object.keys(objects[0]).forEach(k => pattern[k] = '');
            objects.forEach(o => map.set(o[key], { ...map.get(o[key]), ...o }));
        });
        return Array.from(map.values(), o => ({ ...pattern, ...o }));
    },
    data1 = [{ name: 'A', id: 1 }, { name: 'B', id: 2 }],
    data2 = [{ city: 'X', rowID: 1 }, { city: 'Y', rowID: 2 }, { city: 'Z', rowID: 3 }],
    result = merge([[data1, 'id'], [data2, 'rwoID']]);

console.log(result);

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

edited Jan 20, 2021 at 19:42

answered Jan 20, 2021 at 19:07

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

arunmmanoharan Over a year ago

I do not want to create a new object named empty as the keys are dynamic and will change per API. I am planning to use this as a reusable function where I pass in the two data, and their corresponding keys to match

Ori Drori Over a year ago

Look at the last object of the expected results.

Nina Scholz Over a year ago

@OriDrori, if i should not take a default object, how should the result have ungiven properties?

Nina Scholz Over a year ago

@a2441918, now it collects all properties and take them as pattern with empty strings which are replaced by known values.

Ori Drori · Accepted Answer · 2021-01-21 10:10:16Z

1

Concat the arrays, group them by id or rowId, merge all objects and map the values to empty strings, map the object of groups, and merge each group with the defaults to an object (including default empty id and name).

const { concat, groupBy, mapValues, map, merge } = _

const fn = (getId, ...arrs) => {
  const items = concat(...arrs);
  const defaults = mapValues(merge({}, ...items), () => '');

  return map(
    groupBy(items, getId),
    group => merge({}, defaults, ...group)
  )
}

const data1 = [{"name":"A","id":1},{"name":"B","id":2}]

const data2 = [{"city":"X","rowID":1},{"city":"Y","rowID":2},{"city":"Z","rowID":3}]

const result = fn(o => o.id ?? o.rowID, data1, data2)

console.log(result)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

edited Jan 21, 2021 at 10:10

answered Jan 20, 2021 at 19:07

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

3 Comments

arunmmanoharan Over a year ago

What about name and id in the last object? Is there a way we can render them as empty string and I am sending this data to a table and it expects those values to be present. I am also okay to keep them as "-"

Ori Drori Over a year ago

See we merge everything to an empty object, you can easily add defaults.

arunmmanoharan Over a year ago

Keys are dynamic and will change per API. I am planning to use this as a reusable function where I pass in the two data, and their corresponding keys to match. Thanks

Collectives™ on Stack Overflow

Merge and concat two arrays of objects - JS

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related