在嵌套树视图（或嵌套 JSON 对象）中搜索数据答案

【问题标题】：Search Data in the Nested Tree View (Or Nested JSON Object)在嵌套树视图（或嵌套 JSON 对象）中搜索数据
【发布时间】：2020-05-20 11:46:14
【问题描述】：

我想在呈现嵌套数据列表的 Treeview 中实现搜索。我正在使用 Material UI 来为此添加 UI 代码，并且需要添加一个可以搜索嵌套 JSON 对象并仅返回解析的嵌套 JSON 的函数。

我的数据 -

const TreeViewData = {
  id: 'root',
  name: 'Documents',
  children: [
    {
      id: '1',
      name: 'Report',
      children: [
        {
          id: '2',
          name: 'PDF',
        },
      ],
    },
    {
      id: '3',
      name: 'Files',
      children: [
        {
          id: '4',
          name: 'Excel',
        },
      ],
    },
    {
      id: '5',
      name: 'Programs',
      children: [
        {
          id: '6',
          name: 'Codes',
        },
        {
          id: '7',
          name: 'Data',
        },
      ],
    },
  ],
};

我需要添加一个像onSearch(text) 这样的函数，这样当用户输入任何搜索文本时，他将看到带有解析数据的简化树视图。

例如——

onSearch(R) 应该返回

const TreeViewData = {
  id: 'root',
  name: 'Documents',
  children: [
    {
      id: '1',
      name: 'Report',
      children: [
        {
          id: '2',
          name: 'PDF',
        },
      ],
    },
    {
      id: '5',
      name: 'Programs',
      children: [
        {
          id: '6',
          name: 'Codes',
        },
        {
          id: '7',
          name: 'Data',
        },
      ],
    },
  ],
};

onSearch(excel) 再次返回

const TreeViewData = {
  id: 'root',
  name: 'Documents',
  children: [
    {
      id: '3',
      name: 'Files',
      children: [
        {
          id: '4',
          name: 'Excel',
        },
      ],
    },
  ],
};

注意 - 也尝试使用 Lodash，但没有帮助。

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

您可以使用递归搜索树结构。还有一个类似的问题here

【讨论】：

这不起作用，因为我需要上面提到的问题中所需的输出。