根据多个属性过滤js对象数组

Question

（使用 react js）我正在尝试过滤此数组：

[
  {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"},
]

假设这个数组叫做 Locations，我需要实现 4 个过滤器，第一个过滤器使用 gov (governorates) 进行过滤，第二个过滤器使用 districts ，第三个使用 towns ，最后使用 type of industry 。但是如果我已经选择了按地区过滤，那么我想过滤这个地区的行业类型，我需要动态地做；这样，我实现了 4 select 个输入（gov、district、town、type），我本可以一直过滤原始数组，但这将 return 例如所有政府中的牛奶厂一直，而不是特定的政府。所以我需要的是根据多个属性或属性进行过滤，而不仅仅是静态地编写

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

这解决了问题，但不是所有时间都解决了，因为我可能还会选择过滤特定地区、城镇甚至整个国家（在父数组上）的牛奶工厂

让我们假设

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

顺便说一句，我正在使用 react leaflet map 在标记上显示这些值，这就是我需要过滤的原因。

所以我想出了post这里，也许好心人会帮助我解决它谢谢大家

Answer 1

您可以使用以下方法。这个想法是将所有过滤器放在一个匹配对象中，然后在您更改 matchObj :)

时调用 filterData

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

根据多个属性过滤js对象数组

Filtering js array of objects based on more than one property

javascript

arrays

search

filtering

reactjs