CODEWITHSUNDEEP
javascriptjqueryarrays
Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

Javascript Function Array Remove Item

I have Javascript Filter Item Class and array which is like below 

function FilterItem(filterId, filterType) {
    this.filterId = filterId;
    this.filterType = filterType;
}

var filterItemArray = [];

I am adding Filter Items to this array like below

function AddFilterItem(filterId, filterType) {
    filterItemArray.push(new FilterItem(filterId, filterType));
}

I also need to remove item from this array by specific filterId

function RemoveFilterItem(filterId, filterType) {
    var item = new filterItem(filterId, filterType);
    var itemIndex = jQuery.inArray(item, filterItemArray);
}

But this does not work and I dont think it is the efficient way? My Question is what is the best way to remove this item in RemoveFilterItem Method

Upvotes: 1

Views: 117

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92304

Andy's answer works, but you can make it a lot faster using Array.splice. Manwal's answer uses splice but fails if there are duplicate filters.

enter image description here

I would also use OO code instead of global functions.

function FilterItem(filterId, filterType) {
    this.filterId = filterId;
    this.filterType = filterType;
}

function FilterItems() {
    this.items = [];
}

FilterItems.prototype.add = function (filterId, filterType) {
    this.items.push(new FilterItem(filterId, filterType));
}

FilterItems.prototype.remove = function (filterId, filterType) {
    for (var i = this.items.length - 1; i >=0 ; i--) {
        var item = this.items[i];
        if (item.filterId === filterId && item.filterType === filterType) {
            this.items.splice(i, 1);
        }    
    }
}

var filters = new FilterItems();
filters.add(1, 1);
filters.add(2, 2);
// Adding two filters of the same type/id to prove that it can remove
// multiple items
filters.add(1, 1);

filters.remove(1, 1);

console.log(filters.items.length);
console.log(filters.items[0]);

Upvotes: 2

Andy
Andy

Reputation: 63550

Why don't you use the native filter function:

function RemoveFilterItem(filterId, filterType) {    
    filterItemArray = filterItemArray.filter(function (el) {
        return el.filterId !== filterId && el.filterType !== filterType;
    });
}

This will give you the array without that element with that id and type.

DEMO

And here's a modified version of Manwal's answer but without the jQuery again:

function RemoveFilterItem(filterId, filterType) {
    for (var i = 0, l = filterItemArray.length; i < l; i++) {
        var el = filterItemArray[i];
        if (el.filterId === filterId && el.filterType === filterType) {
            filterItemArray.splice(i, 1);

            // because we're caching the length of the array
            // we need to adjust the length of l once the splice has taken place
            l--;
        }
    }
}

DEMO

Upvotes: 3

Manwal
Manwal

Reputation: 23836

You can use $.each to iterate each element of array and then splice it:

function RemoveFilterItem(filterId, filterType) {    
    var item = new FilterItem(filterId, filterType);
    $.each(filterItemArray, function( index, value){
        if(value.filterId == item.filterId){
            filterItemArray.splice(index,1);
        }
    });   
}

See it in action

No need to create new FilterItem while removing:

function RemoveFilterItem(filterId, filterType) {    
    $.each(filterItemArray, function( index, value){
        if(value.filterId === filterId && value.filterType === filterType){
            filterItemArray.splice(index,1);
        }
    });   
}

See Updated Demo

Upvotes: 1

Related Questions