CODEWITHSUNDEEP
javascriptarrays
Dan Whitehouse
Dan Whitehouse

Reputation: 578

Replacing array with filter on multiple not conditions returns wrong result

Details: I have an array of objects tied to the UI. When clicking on an item it triggers the toggleFilter method. If the item wasn't selected, it gets pushed into the filters array (which works fine). However, when I deselect an item it removes all of the entries that partially match the filter conditions.

Any help would be greatly appreciated.

Data:

filters:[
    {"column":"name","value":"Test 1"},
    {"column":"name","value":"Test 2"},
    {"column":"name","value":"Test 3"},
    {"column":"shortName","value":"XXX"}
]

Method:

toggleFilter(item) {
    item.active = !item.active

    if(item.active) {
        this.filters.push({ column: item.column, value: item.value })
    }
    else {
        this.filters = this.filters.filter(f => (f.column !== item.column && f.value !== item.value))
    }
}

For example, if I select 4 filters, and then go to deselect the one where the object value is Test 3, all of the ones where the column is name also get removed.

Output:

filters:[
    {"column":"shortName","value":"XXX"}
]

Expected:

filters:[
    {"column":"name","value":"Test 1"},
    {"column":"name","value":"Test 2"},
    {"column":"shortName","value":"XXX"}
]

I need to filter on two conditions, as sometimes the column may differ, but the value may be the same, and I only want to remove the one that is deselected and replace the filters array. ie:

filters:[
    {"column":"name","value":"test1"},
    {"column":"shortName","value":"test1"}
]

Upvotes: 0

Views: 76

Answers (1)

Heretic Monkey
Heretic Monkey

Reputation: 12113

TL; DR: Change && to || in your filter expression.

Whenever I run into problems like this, I like to slow down and run the matches individually to make sure I understand how my logic is applying:

item f f.column !== item.column f.value !== item.value && ||
{"column":"name", "value":"Test 3"} {"column":"name", "value":"Test 1"} false true false true
{"column":"name", "value":"Test 3"} {"column":"name", "value":"Test 2"} false true false true
{"column":"name", "value":"Test 3"} {"column":"name", "value":"Test 3"} false false false false
{"column":"name", "value":"Test 3"} {"column":"shortName", "value":"XXX"} true true true true

Hopefully you see the pattern, and why AND wasn't working, but OR does.

Upvotes: 1

Related Questions