具有多个条件和值的对象的JavaScript滤波器数组

Question

在react/nextjs中工作，我正在根据带有复选框的用户输入的前端进行过滤。

数据看起来像这样（显然更长）：

[{id: 8211,
title: "ABC",
type: "hardwood",
length: "5",
width: "10",
color: "brown",
finish: "WOCA",
surface: "distressed",
},
{
id: 8208,
title: "DEF",
type: "vinyl",
length: "10",
width: "4",
color: "",
finish: "Urethane",
surface: "smooth",
}]

现在我需要通过这些键/值对过滤：

• 类型（硬木，WPC，SPC，层压板，乙烯基）
• 宽度（4,6）
• 长度（6、12、24）
• 颜色（棕色，中等，灰色，光）
• 完成（WOCA，氨基甲酸酯）
• 表面（光滑，痛苦，线刷）

因此，如果有人检查硬木，乙烯基和棕色 - 这应该显示与硬木或 vinyl 和 brown相匹配的产品。

现在，我不确定如何进行。我可以捕获用户输入并将其存储在对象中（可能使用对象内的数组）。但是我似乎无法弄清楚如何基于此操作的原始道具对象。

Answer 1

您可以使用检查选项的对象，然后基于filter，基于该选项：

：

const data = [{
    id: 8211,
    title: "ABC",
    type: "hardwood",
    length: "5",
    width: "10",
    color: "brown",
    finish: "WOCA",
    surface: "distressed",
  },
  {
    id: 8208,
    title: "DEF",
    type: "vinyl",
    length: "10",
    width: "4",
    color: "",
    finish: "Urethane",
    surface: "smooth",
  }
];
const options = {
  color: ["brown", "randomColor"]
};
const filtered = data.filter(obj => Object.keys(options).some(key => {
  if (key != "color") {
    return obj[key] == options[key];
  } else {
    return options[key].some(s => s == obj[key]);
  }
}));
console.log(filtered);

es5语法：

var data = [{
    id: 8211,
    title: "ABC",
    type: "hardwood",
    length: "5",
    width: "10",
    color: "brown",
    finish: "WOCA",
    surface: "distressed",
  },
  {
    id: 8208,
    title: "DEF",
    type: "vinyl",
    length: "10",
    width: "4",
    color: "",
    finish: "Urethane",
    surface: "smooth",
  }
];
var options = {
  color: "brown"
};
var filtered = data.filter(function(obj) {
  return Object.keys(options).some(function(key) {
    if (key != "color") {
      return obj[key] == options[key];
    } else {
      return options[key].some(function(s) {
        return s == obj[key];
      });
  })
});
console.log(filtered);