Search/Filter nested Array Javascript/Lodash

Question

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 ||       //input of user
              items.description.indexOf("friendly"))
  })
})

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

Hassan Imam · Accepted Answer · 2018-11-14 11:38:29Z

2

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}) => {
      let o = details.filter(({name,description}) => name.includes(term) || description.includes(term));
      if(o && o.length)
        r.push({type, details : [...o]});
      return r;
  },[]);
console.log(result);

edited Nov 14, 2018 at 11:38

answered Nov 11, 2018 at 12:24

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HP_web Over a year ago

Thank you for your answer. Everything works perfect! Learned something new again.

HP_web Over a year ago

There seems to be a problem with your code after all. If the search is empty (term = ' '), an array at "Details" with only length 1 is displayed. It should be an array with 2 objects. Do you know what the problem is?

Hassan Imam Over a year ago

What should be the output when term is empty?

HP_web Over a year ago

The output of an empty String in "includes" should be the same array as dataExample. With your code the output are the two objects ("human" and "animal") and only one object in the "details"-array (instead of two objects).

Angelos Kyriakopoulos · Accepted Answer · 2018-11-11 11:45:04Z

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.

Collectives™ on Stack Overflow

Search/Filter nested Array Javascript/Lodash

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related