Removing the elements from one multidimensional array from another multidimensional array

Question

I'm finding it difficult getting my head around what I think is a pretty simple task. My brain is just fried at the moment and I have a deadline. :(

I need to take all the element arrays from one multidimensional array and remove them from another multidimensional array.

Arr1 = [["Tom", "161"], ["Dick", "29"], ["Harry", "46"], ["Mike", "72"], ["Sally", "11"]];
Arr2 = [["Harry", "46"], ["Mike", "72"], ["Tom", "161"]];

So in this instance I want to take all the element arrays from Arr2 and remove them from Arr1 so that afterward Arr1 would look like this:

Arr1 = [["Dick", "29"], ["Sally", "11"]];

Does that make sense?

EDITx2: Wait, no, ignore that, I was being stupid.

• Ian: Yeah it makes sense. Did you try anything? The general solution will be to loop through each of them and check if any of the items match...if so, you'd use the .splice() method to remove an item. Although it might be optimized to use a lookup instead of nested looping

Answer 1

Assuming you always have two elements in the array, and a "unique" element is defined as a combination of the name and the number, you can do something like this:

function(array1, array2) {
 var seen = {};
 var returnedArray = [];
 for(var i = 0; i < array2.length; i++) {
 var elements = array2[i];
 seen[elements[0] + elements[1]] = true;
 //an alternative to the above is to do
 //seen[JSON.stringify(elements)] = true;
 }
 for(var i = 0; i < array1.length; i++) {
 var elements = array1[i];
 if(!seen[elements[0] + elements[1]]) {
 returnedArray.push(elements);
 }
 //an alternative to the above is to do
 //if(!seen[JSON.stringify(elements)]) {
 // ...
 //}
 //
 //if you took the alternate approach in the first loop
 }
 return returnedArray;
}

Answer 2

Since it's all strings you could get creative with string methods and chaining. Probably not the best performance and a bit tricky, but it works:

var arr = [["Tom", "161"], ["Dick", "29"], ["Harry", "46"], ["Mike", "72"], ["Sally", "11"]];
var remove = [["Harry", "46"], ["Mike", "72"], ["Tom", "161"]];
var result = arr
 .join('|')
 .replace(RegExp(remove.join('|'),'g'),'')
 .match(/[^|]+/g)
 .map(function(s){ return s.split(',') });
console.log(result); //=> [["Dick","29"],["Sally","11"]]

You could even try using JSON. I wouldn't recommend this for production in any case, just for fun.

Demo: http://jsbin.com/obokuy/1/edit

• aadu: Whatever about not for production, yours was the only one I could get to work. Thanks!

Answer 3

If you need to put together something quick, then use a nested loop to walk through the elements of Arr2 for each element in Arr1 and do a comparison on each. You can look at the answers to this question for a hint on comparing the inner arrays:

How to check if two arrays are equal with JavaScript?