如何过滤这样的嵌套数组？答案

【问题标题】：how to filter nested array like this?如何过滤这样的嵌套数组？
【发布时间】：2017-12-31 07:39:19
【问题描述】：

我收到如下回复

 let m =  [
      {
        name: 'Summary',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Upload',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Tasks',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Dashboard',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Master',
        subListExpanded: false,
        subList: [
          {
            id: 'user-master',
            name: 'User-Master'
          },
          {
            id: 'menu-master',
            name: 'Menu-Master'
          },
          {
            id: 'entity-master',
            name: 'Entity-Master'
          },
          {
            id: 'vendor-master',
            name: 'Vendor-Master'
          },
          {
            id: 'xxx-master',
            name: 'xxx-Master'
          }
        ]
      }
    ];

如果我搜索m，过滤器应该是这样的

 [
  {
    name: 'Summary',
    subListExpanded: false,
    subList: [
    ]
  },
  {
    name: 'Master',
    subListExpanded: false,
    subList: [
      {
        id: 'user-master',
        name: 'User-Master'
      },
      {
        id: 'menu-master',
        name: 'Menu-Master'
      },
      {
        id: 'entity-master',
        name: 'Entity-Master'
      },
      {
        id: 'vendor-master',
        name: 'Vendor-Master'
      },
      {
        id: 'xxx-master',
        name: 'xxx-Master'
      }
    ]
  }
];

如果我搜索 master 过滤器响应应该是这样的？

[
      {
        name: 'Master',
        subListExpanded: false,
        subList: [
          {
            id: 'user-master',
            name: 'User-Master'
          },
          {
            id: 'menu-master',
            name: 'Menu-Master'
          },
          {
            id: 'entity-master',
            name: 'Entity-Master'
          },
          {
            id: 'vendor-master',
            name: 'Vendor-Master'
          },
          {
            id: 'xxx-master',
            name: 'xxx-Master'
          }
        ]
      }
    ];

如果我搜索xxx-master，过滤器响应应该是

[
{
        name: 'Master',
        subListExpanded: false,
        subList: [
          {
            id: 'xxx-master',
            name: 'xxx-Master'
          }
        ]
      }
    ];

如果我搜索slkvcsmcskc 过滤响应，例如

[]

我的打字稿代码不能正常工作。请帮我解决这个问题>

  m.filter(x=> x.name.toLowerCase() === search.toLowerCase() || x.subList.some(x1=> x1.name.toLowerCase()===search.toLowerCase()))

【问题讨论】：

列出所有可能的案例并一一列出，然后然后尝试缩短它。您几乎错过了所有需要检查的案例。编写可调试且易于理解的长时间工作代码，然后从那里开始。
确认搜索 1) 是在对象数组的名称属性中以不区分大小写的方式查找字符“m”... - 你是否也在子列表上进行深度搜索并忽略ids，只搜索名称等。你必须更具体地满足你的要求。它是否只在子列表上你有 ids？
您使用的是 lodash 之类的库。还是直接使用 Javascript 数组过滤器？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我最后一个案例可以吗

标签： javascript arrays json typescript filtering

【解决方案1】：

其实应该是这样的：

obj = {
    _id: "sjkd9skj",
    data: {
      dektop: [
                { 
                   x: 2,
                   y: 3,
                   t: { key: 'aabbcc'}
                }, 
                ... 
              ],
      mobile: [
                { 
                   x: 4,
                   y: 3,
                   t: { key: 'ffff'}
                }, 
                ... 
              ],
      print: [
                { 
                   x: 7,
                   y: 5,
                   t: { key: 'ppp'}
                }, 
                ... 
              ]
    }
}

【讨论】：

【解决方案2】：

以下代码给出了所需的输出。请注意，我添加了一些您的用例可能不需要的复杂性。但是，该示例应该适用于具有任意深度嵌套的列表（请参阅“bar”示例）。

let m =  [
      {
        name: 'Summary',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Upload',
        subListExpanded: false,
        subList: [
          {
            name: 'foo',
            subList: [
              {
                name: 'bar',
              }
            ],
          }
        ]
      },
      {
        name: 'Tasks',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Dashboard',
        subListExpanded: false,
        subList: [
        ]
      },
      {
        name: 'Master',
        subListExpanded: false,
        subList: [
          {
            id: 'user-master',
            name: 'User-Master'
          },
          {
            id: 'menu-master',
            name: 'Menu-Master'
          },
          {
            id: 'entity-master',
            name: 'Entity-Master'
          },
          {
            id: 'vendor-master',
            name: 'Vendor-Master'
          },
          {
            id: 'xxx-master',
            name: 'xxx-Master'
          }
        ]
      }
    ];
    
    
function search (input, query) {
  const queryReg = new RegExp(query, 'i');
  
  function searchInternal (data) {
    let result = [];

    data.forEach(item => {
      const parentMatch = queryReg.test(item.name);
      let subMatch = false;
   
      if (item.subList) {
        let subResult = searchInternal(item.subList);
        subMatch = subResult.length > 0;

        item.subList = subMatch ? subResult : [];
      }
      
      // push parent if it matches for itself or a child (list) matches
      if (parentMatch || subMatch) result.push(item);
    });
    
    return result;
  }
  
  return searchInternal(JSON.parse(JSON.stringify(input)) /* create a working copy with JSON.parse(...) */);
}

console.log('master', search(m, 'master'));
console.log('xxx-master', search(m, 'xxx-master'));
console.log('m', search(m, 'm'));
console.log('bar', search(m, 'bar'));
console.log('slkvcsmcskc', search(m, 'slkvcsmcskc'));

【讨论】：

很好的解决方案..你比我更快地把它敲掉了..我唯一要做的就是当你记录它时，做一些类似 console.log('master', search(m, '掌握'））;这样您就可以快速分辨出彼此的结果。
@JGFMK 感谢您的反馈。我按照你的建议做了:)