CODEWITHSUNDEEP
javascriptreactjs
PrideReact
PrideReact

Reputation: 13

Filter array object with an other array

I want to display project that filter on skills array, for example, if I select "HTML", show me, all project with "HTML" in the project array skills. And if I select two skills, display the project that have two skills.

I have this data for my project:

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",
  }
];

And my arrayFilter

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

For the moment, I have this code :

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

Thank you for your help

Upvotes: 1

Views: 64

Answers (1)

Nikita Madeev
Nikita Madeev

Reputation: 4380

You can use 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);

Upvotes: 2

Related Questions