根据动态值Javascript删除数组元素

Question

I have 2 arrays within my Ember application, one array holds a string of ID's and another holds Ember objects.

I want to send the Ember objects to a function, get the array of ID's from a cookie stored in the browser and then filter out the Ember objects if the ID property corresponds to a string in my array of IDS.

I am attempting to use filter for this but every time it just brings back the full list of Ember objects, even if there ID is held in the ID string array. Here is my code from my Ember component..

init () {
        this._super(...arguments);

this.get('userNotificationServices').fetchActiveUserNotifications().then(result => {
            this.updatedArray = this.filterArray(result);
            this.set('activeNotifications', result);
        });

    },

filterArray(currentActiveNotifications) {
    var ids;
    var currentNonDimissedNotifications;
    if (this.getCookie("dismissed-notifications")) {
        ids = this.getCookie("dismissed-notifications").split(',');
        currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) {
            for (var id in ids) {
                return obj.id !== id;
            }
        });
    }
    return currentNonDimissedNotifications;
}

Answer 1

There are two problems with your filter :

currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) {
    for (var id in ids) {
        return obj.id !== id;
    }
});

1. It always returns the result of the first check it does; it never does subsequent checks, because you're using return unconditionally.

2. You've used for-in , which means id will be the index of each entry, not its value. More about looping arrays, and why for-in isn't the right too most of the time, in my answer here .

We want to only return when we've either found a match (we can stop right away) or have looped through the whole array of IDs, and we want to loop correctly.

So it could be:

currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) {
    for (var i = 0; i < ids.length; ++i) { // Note loop
        if (obj.id === ids[i]) {
            // Found it, so we want to filter it out
            return false;
        }
    }
    // Didn't find it, so keep it
    return true;
});

Live Example:

 var currentActiveNotifications = [ {id: 1}, {id: 2}, {id: 3} ]; var ids = [2, 3]; var currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) { for (var i = 0; i < ids.length; ++i) { // Note loop if (obj.id === ids[i]) { // Found it, so we want to filter it out return false; } } // Didn't find it, so keep it return true; }); console.log(currentNonDimissedNotifications); 

...but arrays have a handy function called indexOf that lets us check if a value is in an array (newer versions of JavaScript also have includes ). So we can use that:

currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) {
    return ids.indexOf(obj.id) === -1;
});

Live Example:

 var currentActiveNotifications = [ {id: 1}, {id: 2}, {id: 3} ]; var ids = [2, 3]; var currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) { return ids.indexOf(obj.id) === -1; }); console.log(currentNonDimissedNotifications); 

Or with the newer includes :

currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) {
    return !ids.includes(obj.id);
});

Live Example:

 var currentActiveNotifications = [ {id: 1}, {id: 2}, {id: 3} ]; var ids = [2, 3]; var currentNonDimissedNotifications = currentActiveNotifications.filter(function (obj) { return !ids.includes(obj.id); }); console.log(currentNonDimissedNotifications); 

Answer 2

You should not use for-loop to filter objects, because return obj.id !== id; will always return true, and it only checks the first id also.

Try to use indexOf:

currentNonDimissedNotifications = currentActiveNotifications.filter(function(obj) {
  return ids.indexOf(obj.id) === -1
});