Javascript, Iterating through two arrays of objects and adding an item from one to another "if it doesn't exist"

Question

I have two arrays, one contains values as strings and the other as integers, as silly as it might be but I got stuck on it and I need a little help, I want to iterate through both and if arr1 contains an item that doesn't exist in arr2, it will be pushed to a newArray

here is what I tried

const arr1 = [
  {id: 1, user_id: 1},
  {id: 2, user_id: 2},
  {id: 3, user_id: 3},
  {id: 4, user_id: 4},
]

const arr2 = [
  {id: '1', user_id: '1'},
  {id: '2', user_id: '2'},
  {id: '3', user_id: '3'},
]

const newArray = []

for (const x of arr1) {
  for (const y of arr2) {
    if (x.id !== +y.id) {
      newArray.push(x);
      break;
    }
  }
}

console.log(newArray);

this adds all items in arr1, what I want to be pushed to newArray instead is only the item that exists in arr1 and not in arr2

thanks in advance!

as I said, the wanted result is simply an array of objects that exist in arr1 and not in arr2 — MoSwilam, May 20 '19 at 11:40
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) — Rob, May 20 '19 at 11:44
@MoSwilam the two arrays have different types. A regular array difference would return all the items from array 2, because keys are string in one case and numbers in the other. Just post the expected result, even though this is quite predictable at this point. — briosheje, May 20 '19 at 11:44
you're looking for [.includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) — Jabberwocky, May 20 '19 at 12:12

score 3 · Answer 1 · answered May 20 '19 at 11:47

You could take a Set and filter known items out.

const
    arr1 = [{ id: 1, user_id: 1 }, { id: 2, user_id: 2 }, { id: 3, user_id: 3 }, { id: 4, user_id: 4 }],
    arr2 = [{ id: '1', user_id: '1' }, { id: '2', user_id: '2' }, { id: '3', user_id: '3' }],
    exists = new Set(arr2.map(({ id }) => +id)),
    missing = arr1.filter(({ id }) => !exists.has(id));

console.log(missing);

score 0 · Answer 2 · answered May 20 '19 at 11:49

You can combine Array.filter() and Array.some() like this:

const arr1 = [
  {id: 1, user_id: 1},
  {id: 2, user_id: 2},
  {id: 3, user_id: 3},
  {id: 4, user_id: 4},
]

const arr2 = [
  {id: '1', user_id: '1'},
  {id: '2', user_id: '2'},
  {id: '3', user_id: '3'},
]

const newArray = arr1.filter(obj1 => !arr2.some(obj2 => obj1.id === +obj2.id));

console.log(newArray);

score 0 · Answer 3 · answered May 20 '19 at 12:27

When you are walking through an array yourself and checking if an element is not present, you can tell the outcome either when you find the element (then it is present, you can even break), or when you walked through the entire array without finding it (then it is not present, has to be collected, but this can only happen at the end, after finishing the loop).

const arr1 = [{id: 1, user_id: 1},{id: 2, user_id: 2},{id: 3, user_id: 3},{id: 4, user_id: 4}]
const arr2 = [{id: '1', user_id: '1'},{id: '2', user_id: '2'},{id: '3', user_id: '3'}]

const newArray = []

for (const x of arr1) {
  var found = false;       // tracker variable
  for (const y of arr2) {
    if (x.id === +y.id) {  // comparison became equality
      found = true;
      break;               // if found, then it is found, inner loop can end here
    }
  }
  if(!found) {             // element is stored when the inner loop has not found it
    newArray.push(x);
  }
}

console.log(newArray);

That was the minimal fix, however as looking up values repeatedly with a loop is time consuming, you may rather want to do the Set approach from Nina Scholz's answer, or at least a "budget" solution with an object (or array) standing in for fast-lookup storage:

const arr1 = [{id: 1, user_id: 1},{id: 2, user_id: 2},{id: 3, user_id: 3},{id: 4, user_id: 4}]
const arr2 = [{id: '1', user_id: '1'},{id: '2', user_id: '2'},{id: '3', user_id: '3'}]

const newArray = [];

const lookup = {};         // if it is object...
for (const y of arr2) {
  lookup[y.id]=true;       // ... y.id remains string ...
}

for (const x of arr1) {
  if(!lookup[x.id]) {      // ... numbers are stringified when used as property accessor
    newArray.push(x);
  }
}

console.log(newArray);

score -1 · Answer 4 · answered May 20 '19 at 11:45

You are adding the objects in the new array as soon as you find an object that is different from the one being evaluated. That's not what you want. You want to add the object only if ALL the objects are different.

The best way is by using a flag.

const arr1 = [...]

const arr2 = [...]

const newArray = []

for (const x of arr1) {
  found = false;
  for (const y of arr2) {
    if (x.id === +y.id) {       // IF FOUND ONE THAT IS EQUAL
      found = true;             // SET THE FLAG TO TRUE, AS YOU FOUND AN OBJECT THAT IS EQUAL
      break;
    }
  }
  if (!found) newArray.push(x); // ADD THE OBJECT ONLY AFTER CHECKING ALL THE OBJECTS FROM ARR2
}

Javascript, Iterating through two arrays of objects and adding an item from one to another "if it doesn't exist"

4 Answers4