Question

我想显示按技能数组过滤的项目，例如，如果我选择“ HTML”，请向我显示所有在项目数组技能中带有“ HTML”的项目。如果我选择了两个技能，则显示具有两个技能的项目。

我的项目有以下数据：

const data = [
  {
    id: "1",
    name: "project1",
    techno: ["JAVASCRIPT", "REACTJS"],
    imageUrl: "link",
  },
  {
    id: "2",
    name: "project2",
    techno: ["HTML", "CSS", "SASS"],
    imageUrl: "link",
  },
  {
    id: "3",
    name: "project3",
    techno: ["JAVASCRIPT", "HTML"],
    imageUrl: "link",
  }
];

还有我的arrayFilter

const filter = ["JAVASCRIPT", "HTML", "CSS"];

目前，我有以下代码：

 data
  .filter((filter) => filter.techno.includes(filter[0]))
  .map(({ id, ...otherProps }) => (
     <ProjectItem key={id} {...otherProps} />
     ))

感谢您的帮助

Answer 1

您可以使用every

const data = [
    {
        id: '1',
        name: 'project1',
        techno: ['JAVASCRIPT', 'REACTJS'],
        imageUrl: 'link',
    },
    {
        id: '2',
        name: 'project2',
        techno: ['HTML', 'CSS', 'SASS'],
        imageUrl: 'link',
    },
    {
        id: '3',
        name: 'project3',
        techno: ['JAVASCRIPT', 'HTML', 'REACTJS'],
        imageUrl: 'link',
    },
];

const filter = ['JAVASCRIPT', 'REACTJS'];

const result = data.filter(d => filter.every(t => d.techno.includes(t)));

console.log(result);

用另一个数组过滤数组对象

1 个答案: