Поиск / Фильтр Array Javascript / Lodash - PullRequest
Новая
       12

Поиск / Фильтр Array Javascript / Lodash

0 голосов
/ 11 ноября 2018

Для моего проекта React.js я хотел бы создать поисковый фильтр для вложенного массива. Пользователи будут искать с помощью поля ввода. 

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

В моем поле ввода-поиска я хочу найти «name» или что-то в «description». Структура данных массива должна оставаться прежней.

Вывод, когда я ищу "дружелюбный" или"Питер", должен быть: 

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

Теперь я попробовал что-то вроде этого: 

  let myfilter = dataExample.filter((data) => {
  data.details.filter((items) => {
    return (items.type.indexOf("human") !== -1 ||       //input of user
              items.description.indexOf("friendly"))
  })
})

К сожалению, это не так. Кто-нибудь может мне помочь? С Лодашем тоже не будет проблем. Большое вам спасибо.

Ответы [ 2 ]

0 голосов
/ 11 ноября 2018

Вы можете использовать array#reduce с array#filter, а для проверки своего слова вы можете использовать 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);
0 голосов
/ 11 ноября 2018

Вот несколько примеров без кода. 

  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);
  • В современном javascript вам может потребоваться поиск того, как использовать ключевое слово ... для отображения функций обратного вызова.
...