Dfyjkt

For my React.js project I would like to create a search-filter of a nested Array. Users will search with an input-field.

 var dataExample = [
 
 type: "human", details: [
 id: 1, name: "Peter", description: "friendly, black-hair",
 id: 5, name: "Susan", description: "blond"
 ]
 ,

 
 type: "animal", details: [
 id: 2, name: "Will", description: "lazy, cute",
 id: 3, name: "Bonny", description: "beautiful"
 ]
 
];

In my search-input-field I want to look for "name" or something in "description". The data structure of the array should remain the same.

The output when I'm searching for "friendly" or "Peter" should be:

[
 
 type: "human", details: [
 id: 1, name: "Peter", description: "friendly, black-hair"
 ]
 
];

Now I tried something like this:

 let myfilter = dataExample.filter((data) => 
 data.details.filter((items) => 
 return (items.type.indexOf("human") !== -1 )
)

Unfortunately, this is not how it works. Can anybody help me? Lodash would be no problem, too. Thank you so much.

You can use array#reduce with array#filter and to check for your word you can use string#incldues.

const dataExample = [ type: "human", details: [ id: 1, name: "Peter", description: "friendly, black-hair", id: 5, name: "Susan", description: "blond" ] , type: "animal",details: [ id: 2, name: "Will", description: "lazy, cute", id: 3, name: "Bonny", description: "beautiful" ] ],
 term = 'Peter',
 result = dataExample.reduce((r, type,details) => ,);
console.log(result);

Here are some examples without lodash.

 var dataAll = [
 
 type: "human",
 details: [
 id: 1, name: "Peter", description: "friendly, black-hair",
 id: 5, name: "Susan", description: "blond"
 ]
 ,
 
 type: "animal",
 details: [
 id: 2, name: "Will", description: "lazy, cute",
 id: 3, name: "Bonny", description: "beautiful"
 ]
 
 ];

 var entryTypeFilter = data => data.type.indexOf("hum") !== -1;
 var entryDetailDescFilter = data => data.description.indexOf("friend") !== -1;
 var entryDetailsMapper = data => 
 return 
 type: data.type,
 details: data.details.filter(entryDetailDescFilter)
 ;
 ;
 var entryNoDetailsFilter = data => data.details && data.details.length !== 0;

 var dataFilteredByType = dataAll.filter(entryTypeFilter);
 var dataFilteredByDesc = dataAll.map(entryDetailsMapper);
 var dataFilteredByTypeAndDesc = dataAll.filter(entryTypeFilter).map(entryDetailsMapper);
 var dataFilteredByDescTrimmingEmptyDetailEntries = dataAll.map(entryDetailsMapper).filter(entryNoDetailsFilter);

• In modern javascript you might want to search on how to use the ... keyword for the mapping callback functions.