CODEWITHSUNDEEP
javascriptjqueryarrays
Laurens Swart
Laurens Swart

Reputation: 1249

Trying to remove items from an array in javascript/JQuery

I've read several questions about this on StackOverflow, and found some solutions even, but they all seem to do the same weird thing:

I have an array (array A) of 8 names:

arrayA= ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8"];

And I have an array (array B) of 1 name:

arrayB= ["person1"];

Now, I want to remove all names that do not occur in Array B, from Array A.

So I wrote a little function which loops through all items in Array A, and checks if they occur in Array B. If they do not, I remove them from Array A.

So I looked for a function to remove strings from an array (in PHP, this is all so much easier...), and I found several methods, which all give me exactly the same problem. In the example below, I chose the cleanest method, using jquery's $.grep: 

arrayA= ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8"];
arrayB= ["person1"];

for (var i = 0, len = arrayA.length; i < len; i++) {
			
  if($.inArray(arrayA[i], arrayB) == -1){

    var removeName= arrayA[i];

    console.log('Removing row of: ' + removeName);

    /*
    $('tr[player=\'' + removeName + '\']').find('td')
    .wrapInner('<div style="display: block;" />')
    .parent()
    .find('td > div')
    .slideUp(700, function(){
      $(this).parent().parent().remove();
    });
    */

    arrayA= $.grep(arrayA, function(value) {
      return value != removeName;
    });
    
    console.log('arrayA now consists of: ' + arrayA);

  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

As you can see, it only removes the "even" items from arrayA, i.e. "person2", "person4", "person6" and "person8".

If I execute this function multiple times, the 2nd time it removes again only the "even" items (which is now "person3" and "person7"), and the third time, it removes "person5" (finally)...

Can someone please tell me what I'm not seeing? You can see from the console log that, the first time you run it, all the "odd" items in the array, (i.e. person3, person5 and person7) are "undefined"...

Upvotes: 0

Views: 77

Answers (2)

awmleer
awmleer

Reputation: 1800

This is because when you call this:

arrayA= $.grep(arrayA, function(value) {
  return value != removeName;
});

The length of arrayA changes, thus arrayA[k] will move to the position of arrayA[k-1] (when k>i).

So we'd better create a new array to store the filtered items and after the iteration, give its value to arrayA.

arrayA= ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8"];
arrayB= ["person1","person4"];
var arrayC=[];
for (var i = 0, len = arrayA.length; i < len; i++) {
  console.log('inArray:'+$.inArray(arrayA[i], arrayB))
  if($.inArray(arrayA[i], arrayB) != -1){
    arrayC.push(arrayA[i]);
  }
  console.log('arrayC now consists of: ' + arrayC);
}
arrayA=arrayC;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use do..while loop, Array.prototype.splice() to remove elements from an array

arrayA= ["vincent"
        , "Rumpelstilzchen"
        , "LuckeR"
        , "Nordland"
        , "Siegfried"
        , "NeKrone"
        , "Carnage"
        , "tom59fr"];
arrayB= ["vincent"];

var i = 0;

do {
  if (arrayB[0] !== arrayA[i]) {
    arrayA.splice(i, 1);  
  } else {
  ++i;
  }
} while (i < arrayA.length);
delete i;

console.log(arrayA, arrayB);

Upvotes: 2

Related Questions