搜索/过滤嵌套数组 Javascript/Lodash答案

【问题标题】：Search/Filter nested Array Javascript/Lodash搜索/过滤嵌套数组 Javascript/Lodash
【发布时间】：2019-04-14 08:09:51
【问题描述】：

对于我的 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"}
      ]
  }
];

在我的搜索输入字段中，我想在“描述”中查找“名称”或。 数组的数据结构应该保持不变。

当我搜索“friendly”或“Peter”时的输出应该是：

[
  {
    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"))
  })
})

不幸的是，这不是它的工作方式。有谁能够帮我？ Lodash 也没有问题。非常感谢。

【问题讨论】：

标签： javascript arrays search filter nested

【解决方案1】：

您可以使用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);

【讨论】：

感谢您的回答。一切都很完美！又学到了新东西。
你的代码似乎有问题。如果搜索为空（term = ' '），则显示“详细信息”处仅长度为 1 的数组。它应该是一个包含 2 个对象的数组。你知道问题出在哪里吗？
term为空时应该输出什么？
"includes" 中空字符串的输出应该和 dataExample 是同一个数组。使用您的代码，输出是两个对象（“人类”和“动物”），并且“详细信息”数组中只有一个对象（而不是两个对象）。

【解决方案2】：

这里有一些没有 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);

在现代 javascript 中，您可能想搜索如何将 ... 关键字用于映射回调函数。

【讨论】：