I am building an app where I have to use a filter on array of objects , so depending of options selected by user I should display results (if there is) matching his query , my array looks like :

const fbdata =  [{"plage": 0, "camping": 2,  
"city": 1, "car": 1,  
 "price": 100, "wifi":  "Yes"}, 
 {"plage": 1, "camping": 0,  
"city": 1, "car": 1,  
 "price": 200, "wifi":  "Yes"}, 
 {"plage": 0, "camping": 0,  
"city": 1, "car": 0,  
 "price": 300, "wifi":  "No"}]

I am storing options that have selected from filter form in object let 's say this is the filter :

const myfilter ={
    wifi: "Yes",
    price: [90, 150],
    car: 1,
    
  }

so now I should filter my array and bring data matching the query of user , the main issue is that myfilter object could be a dynamic object , has not constants properties it could be an object of 1 property , 2 , 3 ex :

// 3 props

const myfilter ={
    wifi: "Yes",
    price: [90, 150],
    car: 1,    
  }

// 2 props

const myfilter ={
    plage: "Yes",
    price: [56, 90],
    
  }

// 1 props

const myfilter ={
   camping : 2
    
  }

that 's what I've tested but it did not work cause it bring all data , no filtering effect

 let data2= new Set() ;
      let mes2= 'mes2' ;
      dd = fbdata.filter((item) =>{

        for (var key in myfilter) {
          if(myfilter[key] !== undefined){
            
             if (item[key] !== undefined && item[key] == myfilter[key]){
                return data2.add(item)
            }
          
          }
        
      }
return data2

CodePudding user response：

You can classify them by typeof and check the value of each key with a respective type:

• string is wifi
• number is plage, camping, city, and car
• price is an array

const filterData = (data, filterProps) => {
  return data.filter((item) => {
    return Object.entries(filterProps).every(([key, value]) => {

      //wifi
      if (typeof(value) === "string" && typeof(item[key]) === "string") {
        return item[key].toLowerCase() === value.toLowerCase()
      }

      //plage, camping, city, car
      if (typeof(value) === "number" && typeof(item[key]) === "number") {
        return item[key] >= value
      }

      //price
      if (Array.isArray(value) && value.length === 2 && typeof(item[key]) === "number") {
        return item[key] >= value[0] && item[key] <= value[1]
      }

      return false
    })
  })
}

const fbdata = [{
    "plage": 0,
    "camping": 2,
    "city": 1,
    "car": 1,
    "price": 100,
    "wifi": "Yes"
  },
  {
    "plage": 1,
    "camping": 0,
    "city": 1,
    "car": 1,
    "price": 200,
    "wifi": "Yes"
  },
  {
    "plage": 0,
    "camping": 0,
    "city": 1,
    "car": 0,
    "price": 300,
    "wifi": "No"
  }
]

console.log(filterData(fbdata, {
  wifi: "Yes",
  price: [90, 150],
  car: 1,
}))

console.log(filterData(fbdata, {
  plage: 0,
  price: [56, 90],
}))

console.log(filterData(fbdata, {
  camping: 2
}))