如何使用vue/javascript通过多个属性过滤深度嵌套的json

我有一些JSON，其结构如下：

{
  "root": {
    "Europe": {
      "children": [
        {
          "name": "Germany"
        },
        {
          "name": "England",
          "children": [
            {
              "name": "London",
              "search_words": ["city", "capital"],
              "children": [
                {
                  "name": "Westminster",
                  "search_words": ["borough"]
                }
              ]
            },
            {
              "name": "Manchester",
              "search_words": ["city"]
            }
          ]
        },
        {
          "name": "France",
          "children": [
            {
              "name": "Paris",
              "search_words": ["city", "capital"]
            }
          ]
        }
      ]
    },
    "North America": {
      "children": [
        {
          "name": "Canada",
          "children": [
            {
              "name": "Toronto"
            },
            {
              "name": "Ottawa"
            }
          ]
        },
        {
          "name": "United States"
        }
      ]
    }
  }
}

我想基于文本搜索过滤JSON。我应该能够通过

名称

和任何

搜索词

进行搜索。最后一个问题是JSON可以是任意深度的，因此它需要能够搜索所有级别

我还需要在HTML中循环并打印JSON（使用Vue），并根据搜索进行更新。目前还不清楚在不知道JSON会有多深的情况下我如何做到这一点

任何帮助都将不胜感激

我最近回答了。我在这里分享它，因为我认为它为这个帖子提供了相关的基础。在开始之前，我们必须首先解决输入数据的不规则形状-

常量数据2= {名称：“根” ，儿童： Array.from （Object.entries（data.root） ，（[国家]=> 分配（{name:country}，}） ) } log（JSON.stringify（data2，null，2）） 现在我们可以看到

data2

是一个统一的

{name，children:[…]}

形状-

{
“名称”：“根”，
“儿童”：[
{
“名称”：“欧洲”，
“儿童”：[
{“名称”：“德国”}，
{
“姓名”：“英格兰”，
“儿童”：[
{
“名称”：“伦敦”，
“搜索词”：[“城市”、“首都”]，
“儿童”：[
{
“名称”：“威斯敏斯特”，
“搜索词”：[“自治区”]
}
]
},
{
“姓名”：“曼彻斯特”，
“搜索词”：[“城市”]
}
]
},
{
“名称”：“法国”，
“儿童”：[
{
“名称”：“巴黎”，
“搜索词”：[“城市”、“首都”]
}
]
}
]
},
{
“名称”：“北美”，
“儿童”：[
{
“姓名”：“加拿大”，
“儿童”：[
{“姓名”：“多伦多”}，
{“姓名”：“渥太华”}
]
},
{“名称”：“美国”}
]
}
]
}

现在我们编写一个通用的深度优先遍历函数，

dft

-

function*dft（t，path=[]）
{对于（t.儿童的常数？？[]））
收益率*dft（，[…路径，t.name]）
屈服[路径，t]
}

我们的

dft

函数为输入树中的每个元素

e

提供了

路径
t
-

[“根”，“欧洲”]
{“名称”：“德国”}
[“根”、“欧洲”、“英国”、“伦敦”]
{名称：“威斯敏斯特”，搜索词：[“自治区”]}
[“根”、“欧洲”、“英国”]
{姓名：“伦敦”，搜索词：[“城市”，“首都]，儿童：[……]}
[“根”、“欧洲”、“英国”]
{姓名：“曼彻斯特”，搜索词：[“城市”]}
[“根”，“欧洲”]
{姓名：“英格兰”，儿童：[……]}
[“根”、“欧洲”、“法国”]
{名称：“巴黎”，搜索词：[“城市”、“首都”]}
[“根”，“欧洲”]
{姓名：“法国”，儿童：[……]}
[“根”]
{姓名：“欧洲”，儿童：[……]}
[“根”、“北美”、“加拿大”]
{名称：“多伦多”}

现在我们知道了每个节点的路径，我们可以创建一个
索引
，它使用
路径
和任何
搜索词
链接回节点-

const index=t=>
Array.from
（干膜厚度（t）
，（[path，e]）=>
[[…路径，e.name，…e.search_单词？？？[]//要链接到e的所有单词
，e//e
]
)
减少
（（m，[字，e]）=>
insertAll（m，words，e）//使用泛型帮助器更新索引
，新地图
)

这取决于通用帮助程序
insertAll
-

const insertAll=（m，键，值）=>
减少
（（m，k）=>
m、 集合（k，[…m.get（k）？[]，值]）
M
)

随着
索引
的完成，我们有了一种方法来创建任何搜索词的快速查找-

const myIndex=
索引（数据2）
console.log（myIndex）

Map
{“欧洲”=>
[{“姓名”：“德国”}，{“姓名”：“威斯敏斯特”，…}，{“姓名”：“伦敦”，…}，{“姓名”：“曼彻斯特”，…}，{“姓名”：“英格兰”…}，{“姓名”：“曼彻斯特”，…}]}，{“姓名”：“巴黎”，…}，{“姓名”：“法国”…}，{“姓名”：“欧洲”…}，{“姓名”：“曼彻斯特”，…}，{“法国”…}]
，“德国”=>
[{“名称”：“德国”}]
，“英格兰”=>
[{“姓名”：“威斯敏斯特”，…}，{“姓名”：“伦敦”，…}，{“姓名”：“曼彻斯特”，…}，{“姓名”：“英格兰”…}，{“姓名”：“曼彻斯特”，…}]
，“伦敦”=>
[{“名称”：“威斯敏斯特”，…}，{“名称”：“伦敦”，…}]
，“威斯敏斯特”=>
[{“名称”：“威斯敏斯特”，…}]
，“自治区”=>
[{“名称”：“威斯敏斯特”，…}]
，“城市”=>
[{“姓名”：“伦敦”、…}、{“姓名”：“曼彻斯特”、…}、{“姓名”：“巴黎”、…}]
，“资本”=>
[{“名称”：“伦敦”，…}，{“名称”：“巴黎”，…}]
，“曼彻斯特”=>
[{“姓名”：“曼彻斯特”，…}]
，“法国”=>
[{“名称”：“巴黎”，…}，{“名称”：“法国”…}]
，“巴黎”=>
[{“名称”：“巴黎”，…}]
，“北美”=>
[{“姓名”：“多伦多”}，{“姓名”：“渥太华”}，{“姓名”：“加拿大”…}，{“姓名”：“美国”}，{“姓名”：“北美”…}，
{“名称”：“美国”}]}]
，“加拿大”=>
[{“姓名”：“多伦多”}，{“姓名”：“渥太华”}，{“姓名”：“加拿大”…}]
，“多伦多”=>
[{“姓名”：“多伦多”}]
，“渥太华”=>
[{“姓名”：“渥太华”}]
，“美国”=>
[{“姓名”：“美国”}]
}

这将突出显示数据中剩余的不一致性。例如，有些节点嵌套在
城市
、
首都
或
自治区
下。还值得注意的是，我们可能应该在所有索引键上使用
s.toLowerCase（）
，以便查找不区分大小写。这是留给读者的练习

创建
索引
很容易，只需执行一次-

const myIndex=
索引（数据2）

您的索引可以作为