Merge/Add an object into an array - Javscript

Question

I have an two arrays of objects. My goal is to replace an object from the second array into the first one based upon 'id'. I have a working solution, but would like to extend it by adding the object to the first array if a value isnt found. Please advice.

function mergeById(arr) {
  return {
    with: function(arr2) {
      return _.map(arr, item => {
        return _.find(arr2, obj => obj.id === item.id) || item
      })
    }
  }
}

var result = mergeById([{
      id: '124',
      name: 'qqq'
    },
    {
      id: '589',
      name: 'www'
    },
    {
      id: '567',
      name: 'rrr'
    }
  ])
  .with([{
    id: '124',
    name: 'ttt'
  }, {
    id: '45',
    name: 'yyy'
  }])

console.log(result);

/**
[
  {
    "id": "124",
    "name": "ttt"
  },
  {
    "id": "589",
    "name": "www"
  },
  {
    "id": "567",
    "name": "rrr"
  },
  {
    id: '45',
    name: 'yyy'
  }
]
**/

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

Please advice.

Nina Scholz · Accepted Answer · 2021-03-23 14:44:21Z

1

You need to filter the second array and add the values who have no common id.

function mergeById(arr) {
    return {
        with: function(arr2) {
            return [
                ..._.map(arr, item => _.find(arr2, obj => obj.id === item.id) || item),
                ..._.filter(arr2, item => !_.some(arr, obj => obj.id === item.id))
            ];
        }
    }
}

var result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
      .with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }]);

console.log(result);

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

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

A shorter approach with a Map and single loops for every array.

function mergeById(array) {
    const
        add2map = (m, o) => m.set(o.id, o),
        map = array.reduce(add2map, new Map);
    return {
        with: function(array2) {
            return Array.from(array2
                .reduce(add2map, map)
                .values()
            );
        }
    }
}

var result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
      .with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }]);

console.log(result);

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

edited Mar 23, 2021 at 14:44

answered Jan 11, 2021 at 20:57

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

arunmmanoharan Over a year ago

Thank you as always :)

Ori Drori · Accepted Answer · 2021-01-11 21:11:29Z

1

Use _.differenceBy(arr2, arr, 'id') to find all items that appear in arr2 that doesn't have a counterpart in arr by id, and concat them to the results of the _.map() action.

Note: instead using _.find() (O(n)) on each iteration, iterate arr2 once with _.keyBy() (O(n)) to create a dictionary { [id]: item }, and then get the items in O(1).

const mergeById = arr => ({
  with(arr2) {
    const arr2Dict = _.keyBy(arr2, 'id')

    return _.map(arr, item => arr2Dict[item.id] || item)
      .concat(_.differenceBy(arr2, arr, 'id'))
  }
})

const result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
      .with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }])

console.log(result)

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

You can replace/add in a single loop by concating both arrays, reducing to a Map, and just adding the items by id to the Map:

const mergeById = arr => ({
  with(arr2) {
    return Array.from(
      [...arr, ...arr2]
        .reduce((r, o) => r.set(o.id, o), new Map)
        .values()
    )
  }
})

const result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
      .with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }])

console.log(result)

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

edited Jan 11, 2021 at 21:11

answered Jan 11, 2021 at 20:57

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

4 Comments

arunmmanoharan Over a year ago

Why the two ? ?

Ori Drori Over a year ago

be more specific

arunmmanoharan Over a year ago

Sorry, there were two question marks in your code. Looks like you edited it now. Thanks

Ori Drori Over a year ago

The 2 question marks ?? are called Nullish coalescing operator, but there are not necessary for this answer, and I thought that they might be confusing that's why I edited them out.

Collectives™ on Stack Overflow

Merge/Add an object into an array - Javscript

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related