Delete elements of array based on another array

Question

I have an array like this

var arrayFilterKeyValues=[{id:1,name:"one"},{id:2,name:"2"}..]

I have another array like this

var valuesArr=["1","2","3","4"...]

Now I am trying to delete elements from arrayFilterKeyValues if the id's are in valuesArr. This is the code I am using

for (var i = 0; i < arrayFilterKeyValues.length; ++i) {
    var found = false;
    for (var k = 0; k < valuesArr.length; k++) {
        if (arrayFilterKeyValues[i].id == valuesArr[k]) {
            found = true;
            break;
        }
    }
    if (found) {
        delete arrayFilterKeyValues[i];
    }
}

This is deleting the elements but when I check the array it has commas(,) in the array and when I check the length it is still showing the length of the array prior to deletion of elements. What am I doing wrong here? Need a solution compatible for IE8+

*"What am I doing wrong here?"* You are not "properly" deleting the element from the array: [JavaScript Array Delete Elements](http://stackoverflow.com/q/500606/218196). — Felix Kling, Feb 13 '15 at 06:18
Deleting elements from an array doesn't *reorder* the array. — Ja͢ck, Feb 13 '15 at 06:19

Oleksandr T. · Accepted Answer · 2015-02-13T09:14:29.707

3

Use .filter, and .indexOf

arrayFilterKeyValues = arrayFilterKeyValues.filter(function (el) {
  return valuesArr.indexOf(el.id) === -1;
});

Example

jQuery version

arrayFilterKeyValues = $.grep(arrayFilterKeyValues, function (el) {
  return $.inArray(el.id, valuesArr) === -1;
});

Update

when I check the array it has commas(,)

it happens because

When you delete an array element, the array length is not affected. Deleting array elements

edited Feb 13 '15 at 09:14

answered Feb 13 '15 at 06:19

Oleksandr T.

76,493
17
173
144

@Praveen please look at this example http://jsbin.com/wajihi/4/edit?js,console, I've added couple possible solutions. – Oleksandr T. Feb 13 '15 at 08:45

score 0 · Answer 2 · answered Feb 13 '15 at 06:33

The delete operator removes a property from an object.

In case of arrays when you delete an array element, the array length is not affected. This holds even if you delete the last element of the array and the element is not available in the array.

SOURCE: CLICK HERE

To remove elements from array use the following

for (var i = 0; i < arrayFilterKeyValues.length; ++i) {
  var found = false;
  for (var k = 0; k < valuesArr.length; k++) {
      if (arrayFilterKeyValues[i].id == valuesArr[k]) {
          found = true;
          break;
      }
  }
  if (found) {
   var removedele = arrayFilterKeyValues.splice(i, 1);
  }
}

score 0 · Answer 3 · answered Feb 13 '15 at 06:53

A pattern that I found useful often when updating arrays in-place is the read-write:

var wp = 0, n=arrayFilterKeyValues.length;
for (var rp=0; rp<n; rp++) {
    if (valuesArr.indexOf(arrayFilterKeyValues[rp].id) == -1) {
        arrayFilterKeyValues[wp++] = arrayFilterKeyValues[rp];
    }
}
arrayFilterKeyValues.splice(wp);

i.e. keeping a writer pointer wp starting at 0 and doing an element copy arr[wp++]=arr[rp] operation for each element you want to keep. At the end you can resize the array.

With Javascript however the filter method of arrays already does this kind of operation with the only problem of returning a new independent array. Probably the efficiency gained by not allocating new elements is not worth the extra coding. Also the somewhat simpler

var new_arr = arrayFilterKeyValues.filter(function(x) {
                  return valuesArr.indexOf(x.id) == -1;
              });
arrayFilterKeyValues.splice(0);
arrayFilterKeyValues.push.apply(arrayFilterKeyValues, new_arr);

may be is even going to be more efficient despite doing extra memory allocation.

Instead of the splice/push operation may be a simple assignment to arrayFilterKeyValues is acceptable but note that you are not "updating" the array in this case, but assigning a new array to the same variable.

This is different if the same object is referenced in other places.

Delete elements of array based on another array

3 Answers3