How to remove multiple items from an array via looping in Javascript

Question

So, I have a javascript array of multiple values:

var keymap = {'name': 'foobaz', 
              'mappings': [{'id': 1, 'key': 'b'},
                          {'id': 2, 'key': 'c'},
                          {'id': 3, 'key': 'd'},
                          {'id': 1, 'key': 'e'},
                          {'id': 10, 'key': 'f'},
                          {'id': 7, 'key': 'g'},
                          {'id': 1, 'key': 'h'}]
}

I want to remove any entries where key is 'b'. Note the ids correspond to the backend ids. What I want to do is to remove some of the mappings (for example, all with 'id' as '1').

What I've tried is:

for (var i = 0; i < keymap['mappings'].length; i++) {
    if (keymap['mappings'][i]['id'] === id_to_match) {
        keyboard_map['mappings'].splice(i, 1);
    }
}

However, slice will change the indexes of the array in-place, and therefore now i won't point to the correct index point (as any indexes higher will now be i-n where n would be the number of slices done before.

What is the correct way to implement this?

Travis J · Accepted Answer · 2013-10-22 14:29:24Z

5

An easy way is to decrement the iterator (this works since you read the length every iteration - so make sure you avoid caching the length)

for (var i = 0; i < keymap['mappings'].length; i++) {
 if (keymap['mappings'][i]['id'] === id_to_match) {
    keyboard_map['mappings'].splice(i, 1);
    i--;
 }
}

answered Oct 22, 2013 at 14:29

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

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

Comments

ZER0 · Accepted Answer · 2013-10-22 15:24:59Z

2

I would use the filter method:

var id_to_remove = 1;
keymap.mappings = keymap.mappings.filter(function(item) {
    return item.id !== id_to_remove;
}));

Notice that, besides using the filter method or not, even with a plain for loop, is much better for performance create a new array from scratch, instead of mutate the current one multiple times. So basically:

var id_to_remove = 1;
var filtered = [];
for (var i = 0, item; item = keymap.mappings[i++];) {
    if (item.id !== id_to_remove)
        filtered.push(item);
}
keymap.mappings = filtered;

Of course if filter is available it's much better use it because it's native, here we just mimic the same behavior.

edited Oct 22, 2013 at 15:24

answered Oct 22, 2013 at 14:33

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

Comments

Nicolas Straub · Accepted Answer · 2013-10-22 14:30:09Z

1

for (var i = 0; i < keymap['mappings'].length; i++) {
    if (keymap['mappings'][i]['id'] === id_to_match) {
        keyboard_map['mappings'].splice(i--, 1);
    }
}

answered Oct 22, 2013 at 14:30

Nicolas Straub

3,4096 gold badges24 silver badges43 bronze badges

Comments

Scott Mermelstein · Accepted Answer · 2013-10-22 14:31:56Z

1

You could walk your array backwards, so that the splicing doesn't impact later loop iterations:

for (var i = keymap['mappings'].length - 1; i >= 0; i--) {
    if (keymap['mappings'][i]['id'] === id_to_match) {
        keyboard_map['mappings'].splice(i, 1);
    }
}

answered Oct 22, 2013 at 14:31

Scott Mermelstein

15.4k4 gold badges51 silver badges77 bronze badges

Comments

VladimirKosmala · Accepted Answer · 2013-10-22 14:42:13Z

0

You can use the "filter" method like this:

keymap.mappings = keymap.mappings.filter(function(element){
    return element.id != 1;
});

Which means "keep only elements with id different than 1" or same result "remove elements with id equal to 1".

Every browser implement it, except IE8. http://kangax.github.io/es5-compat-table/#Array.prototype.filter

answered Oct 22, 2013 at 14:42

VladimirKosmala

621 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to remove multiple items from an array via looping in Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related