根据另一个数组值过滤 obj 数组

Question

我有一个这样的对象数组：

[
    {
      "url": "https://recipes-gatsby-react.netlify.app/",
      "stack": [
        {
          "id": 1,
          "title": "GatsbyJs"
        },
        {
          "id": 2,
          "title": "React"
        },
        {
          "id": 3,
          "title": "GraphQl"
        }
      ],
      "id": "Project_1",
      "featured": false,
      "title": "Gatsby recipes app"
    },
    {
      "url": "https://resort-react-mr.netlify.app",
      "stack": [
        {
          "id": 4,
          "title": "React"
        },
        {
          "id": 5,
          "title": "Contentful"
        }
      ],
      "id": "Project_2",
      "featured": false,
      "title": "react resort"
    },
    {
      "url": "https://color-generator-react-mr.netlify.app/",
      "stack": [
        {
          "id": 6,
          "title": "React"
        }
      ],
      
      "id": "Project_3",
      "featured": false,
      "title": "color generator"
    },
    {
      "url": "",
      "stack": [
        {
          "id": 7,
          "title": "React Native"
        },
        {
          "id": 8,
          "title": "Firebase"
        }
      ],
      
      "id": "Project_4",
      "featured": false,
      "title": "Book-Worm"
    },
    {
      "url": "",
      "stack": [
        {
          "id": 9,
          "title": "React Native"
        },
        {
          "id": 10,
          "title": "Firebase"
        },
        {
          "id": 11,
          "title": "Stripe"
        },
        {
          "id": 12,
          "title": "Google Api"
        }
      ],
      "id": "Project_5",
      "featured": false,
      "title": "Delivery App"
    },
    {
      "url": "https://cocktails-react-app-mr.netlify.app/",
      "stack": [
        {
          "id": 13,
          "title": "React"
        }
      ],
      
      "id": "Project_6",
      "featured": false,
      "title": "Cocktails App"
    },
    {
      "url": "https://www.ideacasaitalia.it/index.php",
      "stack": [
        {
          "id": 14,
          "title": "Prestashop"
        }
      ],
      
      "id": "Project_7",
      "featured": false,
      "title": "Idea Casa Italia"
    }
  ]

例如，我还有另一个（简单）数组，例如这个

["react","prestashop"]

我想根据第二个数组的值的 STACK 键过滤第一个数组，即我想返回所有至少具有数组元素（变量）的元素。 我来到了这里

const filter = value => {
      const newProj = relProjects.filter(obj =>
        obj.stack.some(st => st.title.toLowerCase().includes(value))
      )

      setProjRel(newProj)
    }

console.log(filter(["react","prestashop"])

但是通过这种方式我只能获取包含数组所有元素的元素。相反，我想返回所有至少有 1 堆我通过的元素谢谢谁会回答我

Answer 1

使用Array#filter 和Array#includes

通过data 数组过滤。谓词是stack 数组至少有一项包含在matches 数组中

const data = [{"url":"https://recipes-gatsby-react.netlify.app/","stack":[{"id":1,"title":"GatsbyJs"},{"id":2,"title":"React"},{"id":3,"title":"GraphQl"}],"id":"Project_1","featured":false,"title":"Gatsby recipes app"},{"url":"https://resort-react-mr.netlify.app","stack":[{"id":4,"title":"React"},{"id":5,"title":"Contentful"}],"id":"Project_2","featured":false,"title":"react resort"},{"url":"https://color-generator-react-mr.netlify.app/","stack":[{"id":6,"title":"React"}],"id":"Project_3","featured":false,"title":"color generator"},{"url":"","stack":[{"id":7,"title":"React Native"},{"id":8,"title":"Firebase"}],"id":"Project_4","featured":false,"title":"Book-Worm"},{"url":"","stack":[{"id":9,"title":"React Native"},{"id":10,"title":"Firebase"},{"id":11,"title":"Stripe"},{"id":12,"title":"Google Api"}],"id":"Project_5","featured":false,"title":"Delivery App"},{"url":"https://cocktails-react-app-mr.netlify.app/","stack":[{"id":13,"title":"React"}],"id":"Project_6","featured":false,"title":"Cocktails App"},{"url":"https://www.ideacasaitalia.it/index.php","stack":[{"id":14,"title":"Prestashop"}],"id":"Project_7","featured":false,"title":"Idea Casa Italia"}];
const matches = ["react", "prestashop"];

const filtered = data.filter(({ stack }) => stack.filter(({ title }) => matches.includes(title.toLowerCase())).length > 0);

console.log(filtered);