user3432681
user3432681

Reputation: 564

How to filter array with filter settings?

I'm stuck with Array, objects and filters. I have the following code and I want to filter the (array)list with my filter settings. and then do something with it. I am using React as frame work. But i think this is pure Javascript.

Am I in the right direction?

filterSettings = { flagA: false, flagB: true, FlagC: true};
        list = [
            {flag: a, txt: 'some text1'},
            {flag: a, txt: 'some text2'},
            {flag: b, txt: 'some text3'},
            {flag: b, txt: 'some text4'},
            {flag: c, txt: 'some text5'},
            {flag: c, txt: 'some text6'},
        ] 

        list.filter(
            // if(filtersettings.a === true) show flags with a 
            //else{hide flags with a}
            // if(filtersettings.b === true) show flags with b 
            //else{hide flags with b}
            ///...ect
        ).map((item)=>{
            console.log(item);
        });

Upvotes: 0

Views: 77

Answers (3)

Mark
Mark

Reputation: 92440

If you make the filterSettings keys correspond with the flag values you can just use the filterSettings value (which is a boolean value) as a test for the filter:

let filterSettings = { a: false, b: true, c: true};
let list = [
    {flag: 'a', txt: 'some text1'},
    {flag: 'a', txt: 'some text2'},
    {flag: 'b', txt: 'some text3'},
    {flag: 'b', txt: 'some text4'},
    {flag: 'c', txt: 'some text5'},
    {flag: 'c', txt: 'some text6'},
] 

let filtered = list.filter( item => filterSettings[item.flag]) // filterSettings[item.flag] will be a boolean
console.log(filtered)

Upvotes: 1

Ele
Ele

Reputation: 33726

You can use the function Array.prototype.filter to filter the specific objects and the function Array.prototype.forEach for looping the filtered array.

I'm assuming you don't know the function Array.prototype.map and its purpose because the way you're using will return an array with undefined values

const filterSettings = { a: false, b: true, c: true},
      list = [    {flag: 'a', txt: 'some text1'},    {flag: 'a', txt: 'some text2'},    {flag: 'b', txt: 'some text3'},    {flag: 'b', txt: 'some text4'},    {flag: 'c', txt: 'some text5'},    {flag: 'c', txt: 'some text6'}],
      handler = ({flag}) => filterSettings[flag];

list.filter(handler).forEach(item=> console.log(item))
.as-console-wrapper { max-height: 100% !important; top: 0; }

Upvotes: 0

Osama
Osama

Reputation: 3040

Create 3 variables a,b,c to handle the three cases then use filter()

var a,b,c;
var new_list = list.filter((item)=>{
    if(filterSettings.flagA==true && item.flag=="a")
    {
         return a.push(item);
    }
    else if(filterSettings.flagB==true && item.flag="b")
    {
         return b.push(item);
    }
   else(filterSettings.flagC==true && item.flag=="c")
   {
         return c.push(item);
   }
}

To get the final result use .length property to check which one is more than 0

if (a.length>0){
    console.log(a)
}
else if (b.length>0){
    console.log(a)
}
else(c.length>0){
    console.log(a)
}

Upvotes: 0

Related Questions