【问题标题】:Filtering nested array过滤嵌套数组
【发布时间】:2017-06-23 08:14:10
【问题描述】:

我正在使用文本搜索一些数据。部分数据是嵌套的,另一部分不是。

  1. 如果它从数据的嵌套部分返回结果,它应该只返回那个 嵌套 值(并且它是父值)。

我也把它放在 codeSandbox 上-https://codesandbox.io/s/Q0w16jLP0

功能:

function filterTypes(items, search) {
  return items.filter(items => {
    const nestedName = items.typechild.map(x => x.name.toLowerCase());
    const name = items.name.toLowerCase();
    return search.every(x => {
      return name.includes(x) || nestedName.some(v => v.includes(x));
    });
  });
}

数据结构:

{
    "name": "Food",
    "typechild": [{
        "name": "Fruit", "id":12,
    }, {
        "name": "Vegetable", "id":13,
    }]
}

现在如何运作:

  • 它返回Food 的所有孩子。

想要的结果:

如果过滤器的值为Fruit,它应该返回...

  • Food作为标题
  • Fruit 在该标题下方

所需的数据结构

{
    "name": "Food",
    "typechild": [{
        "name": "Fruit", "id":12,
    }]
}

【问题讨论】:

    标签: javascript arrays reactjs


    【解决方案1】:

    我会使用递归方法:

    function check(el,name){
     if(el.name.includes(name)){
      return [el];
     }
     if(el.typechild && el.typechild.find){
     var child=el.typechild.find(function(child){
       return check(child,name);
     });
    }
     if(child){
      child=check(child,name);
      child.unshift(el);
      return child;
    }
    return false;
    }
    

    它会返回

    [Food Object, Fruit Object]
    

    【讨论】:

    • 但我需要它来返回数组的填充值。让我更新数据
    • 这仍然只返回name,而它应该返回整个对象。您能否以我的代码为例?比如在这个-codesandbox.io/s/Q0w16jLP0
    • @ycon 只需将 return [name] 更改为 return [el] 并将 .unshift(el.name) 更改为 .unshift(el)
    • 返回“TypeError:无法读取未定义的属性'includes'”。你能看看吗?我在这里试过:codesandbox.io/s/Q0w16jLP0
    • @Ycon el 表示 一个对象 而不是 一个数组 codesandbox.io/s/lm78Lqz1
    【解决方案2】:

    改变原始数据的解决方案。

    var data = [{ name: "Food", typechild: [{ name: "Fruit", level: 2, color: "#fff" }, { name: "Vegetable", level: 2, color: "#fff" }] }, { name: "Entertainment", typechild: [{ name: "Book", level: 2, color: "#fff" }, { name: "Movie", level: 2, color: "#fff" }, { name: "Bar", level: 3, color: "#fff" }] }, { name: "Misc", typechild: [{ name: "Foo", level: 2, color: "#fff" }] }],
        search = 'Fruit',
        index = data.length,
        temp;
    
    while (index--) {
        temp = data[index].typechild.filter(o => o.name === search);
        if (temp.length) {
            data[index].typechild = temp;
        } else {
            data.splice(index, 1);
        }
    }
    
    console.log(data);
    .as-console-wrapper { max-height: 100% !important; top: 0; }

    【讨论】:

    • @Ycon,实际上我不知道预期的数据结构是什么样的。请将此信息添加到问题中。
    • 没错,我刚刚添加了想要的数据结构:{ "name": "Food", "typechild": [{ "name": "Fruit", "id":12, }] }
    • 所以您希望结果只有一个对象?如果可能,不要更多?
    • 它应该返回所有可能的对象-
    • 那么你需要一个数组,就像我的建议一样。什么不适用于您的数据?
    猜你喜欢
    • 1970-01-01
    • 2020-08-25
    • 2012-08-07
    • 1970-01-01
    • 1970-01-01
    • 2021-10-29
    • 2017-01-28
    • 2021-06-06
    相关资源
    最近更新 更多