How to filter array with filter settings?

Question

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);
        });

Answer 1

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) 

Answer 2

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)
}

Answer 3

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; }