Отфильтруйте массив объектов на основе другого значения массива

#reactjs #filter

Вопрос:

У меня есть массив объектов, подобных этому :

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

Я хотел бы отфильтровать первый массив на основе ключа СТЕКА по значению второго массива, т. Е. Я хотел бы, чтобы были возвращены все элементы, у которых есть хотя бы один элемент массива (переменная).
Я пришел к этому

 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 стопка из тех, которые я передал, спасибо, кто ответит мне

Ответ №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);