如何使用 JQuery 搜索 JSON 字符串

Question

在我使用 Web 服务的应用程序中，该 Web 服务方法返回 JSON 字符串，如下所示，

[
   {
      "No":"21",
      "Area":"Default",
      "Branches":[
         {
            "No":"1108",
            "Area":"Davie",
            "IsValid":"False"
         },
         {
            "No":"1107",
            "Area":"Ab region109",
            "IsValid":"False"
         },
         {
            "No":"1105",
            "Area":"Hollywood",
            "IsValid":"False"
         }
      ]
   },
   {
      "No":"17",
      "Area":"East",
      "Branches":[
         {
            "No":"212",
            "Area":"region109",
            "IsValid":"False"
         },
         {
            "No":"219",
            "Area":"region116",
            "IsValid":"False"
         }
      ]
   },
   {
      "No":"24",
      "Area":"East11",
      "Branches":[
         {
            "No":"211",
            "Area":"region108",
            "IsValid":"False"
         },
         {
            "No":"218",
            "Area":"region109",
            "IsValid":"False"
         },
         {
            "No":"1102",
            "Area":"region999",
            "IsValid":"False"
         }
      ]
   },
   {
      "No":"25",
      "Area":"N25",
      "Branches":[
         {
            "No":"213",
            "Area":"region110",
            "IsValid":"False"
         },
         {
            "No":"220",
            "Area":"region999",
            "IsValid":"False"
         }
      ]
   }
]

我将此 JSON 与 kendo treeview 一起使用。这适用于 PC 设备。但是随着巨大的 JSON 集（JSON 之上是巨大集的一部分）kendo treeview 得到标签和移动设备的滞后问题。目前这个JSON，我直接绑定kendo treeview。但为了减少滞后问题并提高效率，我需要在过滤后将 JSON 字符串绑定到kendo treeview。那么我就不需要绑定所有这些巨大的JSON，只绑定相关的JSON。我认为要实现这一点，我需要创建另一个函数来搜索/过滤这个巨大的 JSON 结果。例如，当search key = Hollywood 我需要返回以下 JSON(仅相关分支详细信息并删除其他部分 "No":"1108" 和 "No":"1107")

[
   {
      "No":"21",
      "Area":"Default",
      "Branches":[
         {
            "No":"1105",
            "Area":"Hollywood",
            "IsValid":"False"
         }
      ]
   }
]

eg: 2 当search key = East，我需要返回以下JSON结果。这意味着我需要在根级别和分支级别搜索区域值

[
   {
      "No":"17",
      "Area":"East",
      "Branches":[
         {
            "No":"212",
            "Area":"region109",
            "IsValid":"False"
         },
         {
            "No":"219",
            "Area":"region116",
            "IsValid":"False"
         }
      ]
   }
]

如何使用JQuery 函数或其他正确方法来做到这一点。

Answer 1

这应该可以完成工作

function FilterTree(arr, searchField, searchValue, subSearchField,  results, parentArr){
    for (var i=0 ; i < arr.length ; i++) {
        if (arr[i][searchField] == searchValue) {
            if(parentArr === undefined) results.push(arr[i]);
            else parentArr[subSearchField].push(arr[i]);

        }else if(arr[i][subSearchField] !== undefined){
            var par = JSON.parse(JSON.stringify(arr[i]))
                par[subSearchField] = []

            FilterTree(arr[i][subSearchField], searchField, searchValue, subSearchField,  results, par)
        }
    }       

    if(parentArr !== undefined && parentArr[subSearchField].length) results.push(parentArr)
    return results
    }

这将 A) 循环遍历顶层。如果找到匹配项，它将被添加到结果树中

B) 如果顶层具有指定的子级，则将再次调用该函数，将子级作为顶层并将父级 (OP) 添加到另一个数组。然后，如果在子节点中找到匹配项，则会在将 OP 添加到循环结束时的结果树之前将其添加到 OP

调用示例：

FilterTree(tree, "Area", "Hollywood", "Branches", [])

“tree”是您的原始 JSON 对象

Answer 2

我建议准备一个剑道数据源。 1) 使用transport将数据读入你的数据源

2) 剑道数据源支持filter operation

3) 将数据源绑定到树形视图

<div id="treeview"></div>
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  filter: { field: "ProductName", operator: "startswith", value: "Cha" }
});

  dataSource.fetch(function(){
  var view = dataSource.view();
   $("#treeview").kendoTreeView({
  dataSource: view,
  dataTextField: "ProductName"
});
});