Filtering js array of objects based on more than one property

Question

(using react js) I'm trying to filter this array :

[
  {gov:"A1", district:"1" , town:"t1", type:"cars factory"},
  {gov:"A2", district:"2" , town:"t2", type:"farm"},
  {gov:"A1", district:"1" , town:"t1", type:"milk factory"},
  {gov:"A1", district:"4" , town:"t3", type:"milk factory"},
  {gov:"A3", district:"3" , town:"t4", type:"medicine factory"},
  {gov:"A4", district:"6" , town:"t5", type:"food"},
  {gov:"A3", district:"7" , town:"t4", type:"milk factory"},
  {gov:"A2", district:"2" , town:"t7", type:"construction"},
]

let's say this array is called Locations, I need to implement 4 filters, the first filter is filtering using gov (governorates) , second filter is using districts , third using towns, lastly using type of industry. But what if I already chose filter by districts then I want to filter the type of industry inside this district, I need to do it dynamically; such, I implemented 4 select inputs (gov, district, town , type) , I could have always filtered the original array, but this will return for example the milk factories in all the govs all the time ,instead of a specific govs. So what I need, is to filter based on more than one attribute or property and not by just writing it statically

newArray=Locations.filter( (e)=>{ return e.gov=='A1' && e.type='milk factory'})

this solves it but not all the time since I might also choose to filter milk factories on a specific district , town , or even in the whole country (on the parent array)

let's assume that

gov \\is the value of the selection of governorates
district \\is the value of the selection of districts
town \\is the value of the selection of towns
type \\is the value of the selection of the type

btw, I'm using react leaflet map to display these values on markers, that's why I need to filter.

So I figured out to post it here , maybe a kind soul would help me solving it Thank you guys

Create variables for each type of filter and use those to filter — yaakov
– yaakov, Commented Dec 29, 2021 at 14:03

Max · Accepted Answer · 2024-04-11 08:31:49Z

You can use the following approach. The idea is to have all filters in one matching object, and then call filterData any time you change the matchObj

const data = [
  {gov:"A1", district:"1" , town:"t1", type:"cars factory"},
  {gov:"A2", district:"2" , town:"t2", type:"farm"},
  {gov:"A1", district:"1" , town:"t1", type:"milk factory"},
  {gov:"A1", district:"4" , town:"t3", type:"milk factory"},
  {gov:"A3", district:"3" , town:"t4", type:"medicine factory"},
  {gov:"A4", district:"6" , town:"t5", type:"food"},
  {gov:"A3", district:"7" , town:"t4", type:"milk factory"},
  {gov:"A2", district:"2" , town:"t7", type:"construction"},
];

const filterData = (matchObj) => {
  const matchEntries = Object.entries(matchObj);
  return data.filter(item => {
    return matchEntries.every(([key, val]) => item[key] === val);
  });
};


// Tests:
const matchObj1 = { gov:"A1" };
console.log(matchObj1, filterData(matchObj1));

const matchObj2 = { gov:"A1", type: "milk factory" };
console.log(matchObj2, filterData(matchObj2));

const matchObj3 = { gov:"A1", type: "milk factory", town: "t3" };
console.log(matchObj3, filterData(matchObj3));

Collectives™ on Stack Overflow

Filtering js array of objects based on more than one property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related