从 Javascript 中嵌套数组内的对象中过滤数据的最佳方法

Question

Given the below data, how can I filter data by Framework and return Name and Project? I am trying to set up a search box that would call the filter function.

I can do it if the data is in an array, but not sure how to work in this nested array and object scenario.

const data = [

  { 

     name: 'John Doe', 
     projects: [ 
                 { ProjectName: 'something', Framework: 'React' },
                 { ProjectName: 'something', Framework: 'React Native' },
                 { ProjectName: 'something', Framework: 'NextJS' },
               ]
  },
  { 

     name: 'Jane Doe', 
     projects: [ 
                 { ProjectName: 'something', Framework: 'Vanilla Javascript' },
                 { ProjectName: 'something', Framework: 'Angular' },
                 { ProjectName: 'something', Framework: 'Flutter' },
               ]
  }


]

I can filter by Name using this:

const filteredData = data.filter((item) => {
    return item.name.toLowerCase().includes(searchField.toLowerCase());
  });

But I am not sure how to filter by project name or framework.

Answer 1

Inside your filter, you can use the some what is gonna return true if the condition is met at least once Example: you will be able to have every user with the given project Name

let filteredData = data.filter(i => i.projects.some(p => p.ProjectName === 'something'))

If you are looking for a filtered objects inside, it means, removing the useless projects without the right projectname name you can add a map on your filtered data

filteredData.map(i => { 
   i.projects = i.projects.filter(p => p.ProjectName === 'something');
   return i;
})