How to get difference between two array in JavaScript based on condition using lodash?

Question

I have two arrays like below:

var oldArray = [{ id: '10', name: 'ABC', type: 'type1' },
                { id: '11', name: 'XYZ', type: 'type1' }]

var newArray=[{ id: '10', name: 'ABC', type: 'type1' },
              { id: '11', name: 'XYZ', type: 'type1' }
              { id: '12', name: 'PQR', type: 'type1' },
              { id: '13', name: 'SomeNewData', type: 'type2' }]

I want to get that PQR object from the newArray because it is of type1 and the only object which is difference in the oldArray and push that object into oldArray.

I tried it using the difference method of lodash but I couldn't get it done. Can I achieve this using lodash? Any solution using native JavaScript will also be useful.

Any help would be much appreciated. Thanks!

Are IDs unique? And by "difference", do you mean elements in newArray that are not in oldArray? Or do you want even elements in oldArray that are not in newArray? — ulentini
– ulentini, Commented Mar 12, 2020 at 18:43
@Mr.Polywhirl SomeNewData I won't need this because it is of type2. I only need the difference between those of type1. — Dungeon
– Dungeon, Commented Mar 12, 2020 at 18:45
@Uby I just need that PQR object with less and meaningful code using Lodash. — Dungeon
– Dungeon, Commented Mar 12, 2020 at 18:47

Nenad Vracar · Accepted Answer · 2020-03-12 18:51:32Z

1

You could find the difference using filter and some methods and also check the type.

var oldArray = [{ id: '10', name: 'ABC', type: 'type1' }, { id: '11', name: 'XYZ', type: 'type1' }]
var newArray=[{ id: '10', name: 'ABC', type: 'type1' }, { id: '11', name: 'XYZ', type: 'type1' }, { id: '12', name: 'PQR', type: 'type1' }, { id: '13', name: 'SomeNewData', type: 'type2' }]
              
var diff = newArray.filter(({ id, type }) => (
  type == 'type1' && !oldArray.some(e => e.id == id)
))

console.log(diff)

edited Mar 12, 2020 at 18:51

answered Mar 12, 2020 at 18:48

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

3 Comments

Dungeon Over a year ago

Thank you very much for the answer. Can I get that as an object instead of inside an array?

Nenad Vracar Over a year ago

What if you have multiple objects that pass the condition?

Nenad Vracar Over a year ago

Btw to push each object from diff to oldArray you can use oldArray.push(...diff)

Mr. Polywhirl · Accepted Answer · 2020-03-12 19:01:59Z

You can diff the two arrays by comparing the objects by equivalency. The basic isEq function below was borrowed from here: "Object Equality in JavaScript".

Once you can compare two objects, just diff them by looping over both arrays and building a difference array by checking if the current item exists in the other list.

You do this two times, once for the first list and again for the second. Except on the second time around, you check if the item is already in the diff list.

Edit: If you only want to look at items where type = "type1", filter them out before you proceed.

var oldArray = [{
  id: '10',
  name: 'ABC',
  type: 'type1'
}, {
  id: '11',
  name: 'XYZ',
  type: 'type1'
}]

var newArray = [{
  id: '10',
  name: 'ABC',
  type: 'type1'
}, {
  id: '11',
  name: 'XYZ',
  type: 'type1'
}, {
  id: '12',
  name: 'PQR',
  type: 'type1'
}, {
  id: '13',
  name: 'SomeNewData',
  type: 'type2'
}]

console.log(diff(
  oldArray.filter(item => item.type === 'type1'),
  newArray.filter(item => item.type === 'type1')
));

function diff(arrA, arrB) {
  let diff = [];
  arrA.forEach(itemA => {
    if (!arrB.some(itemB => isEq(itemA, itemB))) {
      diff.push(itemA);
    }
  })
  arrB.forEach(itemB => {
    if (!diff.some(p => isEq(itemB, p)) && !arrA.some(itemA => isEq(itemA, itemB))) {
      diff.push(itemB);
    }
  })
  return diff;
}

function isEq(a, b) {
  var aProps = Object.getOwnPropertyNames(a);
  var bProps = Object.getOwnPropertyNames(b);
  if (aProps.length != bProps.length) {
    return false;
  }
  for (var i = 0; i < aProps.length; i++) {
    var propName = aProps[i];
    if (a[propName] !== b[propName]) {
      return false;
    }
  }
  return true;
}

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

Ata · Accepted Answer · 2020-03-12 19:01:59Z

1

How with vanilla?

var oldArray = [{
    id: '10',
    name: 'ABC',
    type: 'type1'
  },
  {
    id: '11',
    name: 'XYZ',
    type: 'type1'
  }
]

var newArray = [{
    id: '10',
    name: 'ABC',
    type: 'type1'
  },
  {
    id: '11',
    name: 'XYZ',
    type: 'type1'
  }, {
    id: '12',
    name: 'PQR',
    type: 'type1'
  },
  {
    id: '13',
    name: 'SomeNewData',
    type: 'type2'
  }
]

var existingArray = oldArray.map(arr => arr.id);

var filteredArray = newArray.filter(arr => arr.type === 'type1' && !existingArray.includes(arr.id));

var mergedArray = oldArray.concat(filteredArray);

console.log(mergedArray);

edited Mar 12, 2020 at 19:01

answered Mar 12, 2020 at 18:57

Ata

3121 silver badge7 bronze badges

1 Comment

Dungeon Over a year ago

This is indeed useful. Thanks!

Collectives™ on Stack Overflow

How to get difference between two array in JavaScript based on condition using lodash?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related