filtering an array of objects based on a contained arrays contents. Vanilla JS, lodash, some other react releated technology?

Question

So i'm making a react app and I have a list of projects that use specific technologies. I want the user to be able to be able to say i'm looking for a project that uses 'a', 'b', and 'c' technologies via some checkboxes (maybe) and the list of projects will automatically update. Should i just be using vanilla javascript for this (to sort through an array of objects) or is there an easier way to do it?

If this should be done via vanilla javascript, can someone give me a little direction please. was able to do this successfully search for just one 'technology' but couldn't quite get it done searching for multiple technologies.

Example data to be below.

const projects = [{
  name: 'projecta',
  technologies: ['a', 'b', 'f'],
  link: 'www.example.com'
},
{
  name: 'projectb',
  technologies: ['c', 'd', 'e'],
  link: 'www.example.com'
},
{
  name: 'projectc',
  technologies: ['a', 'b', 'c', 'd', 'e'],
  link: 'www.example.com'
}];

Answer 1

You could use a destructuring while filtering with checking all wanted technologies.

const
    projects = [{ name: 'projecta', technologies: ['a', 'b', 'f'], link: 'www.example.com' }, { name: 'projectb', technologies: ['c', 'd', 'e'], link: 'www.example.com' }, { name: 'projectc', technologies: ['a', 'b', 'c', 'd', 'e'], link: 'www.example.com' }],
    search = ['c', 'e'],
    result = projects.filter(({ technologies }) =>
        search.every(s => technologies.includes(s)));
   
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you have multiple checkboxes you will get an array which contains the value of all selected checkboxes. Filter the array based one or multiple values will work like this:

const projects = [
    {
        name: 'projecta',
        technologies: ['a', 'b', 'f'],
        link: 'www.example.com'
    },
    {
        name: 'projectb',
        technologies: ['c', 'd', 'e'],
        link: 'www.example.com'
    },
    {
        name: 'projectc',
        technologies: ['a', 'b', 'c', 'd', 'e'],
        link: 'www.example.com'
    }
];

const search = ['c', 'e'];

const result = projects.filter(project => {
  return search.every(s => project.technologies.includes(s));
});

// or

const result2 = projects.filter(project => {
  return !search.some(s => project.technologies.indexOf(s) === -1);
});

console.log(result);
console.log(result2);