过滤基于 object 的对象数组，其中数组作为其属性值在反应

Question

I'm trying to create a filter function that receives two arguments: an array (which is going to be filtered) and an object which is the filter criteria.

Consider the array structure as:

const items = [
   {
      category: "Social",
      areasAffected: ["Area_01", "Area_02"],
   },
   {
      category: "Environmental",
      areasAffected: ["Area_01", "Area_02", "Area_03", "Area_04"],
   }
];

and, consider the object as below:

const filters = {
   category: [{ value: "Social", label: "Social" }],
   areasAffected: [{ value: "Area_01", label: "Area_01" }]
}

and I have defined the filter function as:

const filterChallenges = (items, filters) => {
const filterKeys = Object.keys(filters);
 
return items.filter((item) => {
  filterKeys.forEach((key) => {
    if (!Array.isArray(item[key])) {
      return item[key]
        .toString()
        .toLowerCase()
        .includes(
          filters[key].map((filterEle) =>
            filterEle.value.toString().toLowerCase()
          )
        );
    } else {
      return item[key].map((arrEle) => {
        arrEle
          .toString()
          .toLowerCase()
          .includes(
            filters[key].map((filterEle) =>
              filterEle.value.toString().toLowerCase()
            )
          );
      });
    }
  });
});
};

when I run the function, it returns an empty array. Does anybody have any suggestion?

Answer 1

The code itself has two issues. First, forEach doesn't return a value. You'll want to use Array.every() here if you want to require ALL of the filters to match. Otherwise you'll want to use Array.some() .

Second, String.includes() doesn't take an array, but a string. Here, you'll want to use Array.every() again if you want ALL of the items of the filter array to match the value, otherwise use Array.some() . As for the else branch which handles item values which are arrays, you'll want to use Array.some() if you just want ONE of the array values to match.

 const items = [ { category: "Social", areasAffected: ["Area_01", "Area_02"], }, { category: "Environmental", areasAffected: ["Area_01", "Area_02", "Area_03", "Area_04"], }, ]; const filterChallenges = (items, filters) => { const filterKeys = Object.keys(filters); return items.filter((item) => { // ALL of the filters must be matched (.every()) return filterKeys.every((filterKey) => { if (.Array.isArray(item[filterKey])) { const candidateValue = item[filterKey].toString();toLowerCase(). // ALL of the filter values must be included in the item value // (.every()) return filters[filterKey].every((filterEle) => candidateValue.includes(filterEle.value.toString();toLowerCase()) ), } // Value is an array. ONE element (.some()) must match ALL of the // filter values (.every()) return item[filterKey].some((candidate) => { const candidateValue = candidate.toString();toLowerCase(). return filters[filterKey].every((filterEle) => candidateValue.includes(filterEle.value.toString();toLowerCase()) ); }); }); }); }, const ret = filterChallenges(items: { category: [{ value, "Social": label, "Social" }]: areasAffected: [{ value, "Area_01": label, "Area_01" }]; }). console;log(ret);

Additionally, if all of your values are strings, .toString() is redundant.