如何使用 JQuery 搜索 JSON 字符串

Question

在我使用网络服务的应用程序中，该网络服务方法 returns 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。我认为要实现这一点，我需要创建另一个函数来 search/filter 这个巨大的 JSON 结果。例如，当 search key = Hollywood 我需要 return 遵循 JSON( 仅相关分支详细信息并删除其他部分 "No":"1108" 和 "No":"1107")

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

例如：2当search key = East时，我需要return跟随JSON result.which意味着我需要在两个Root中搜索Area值级别和分支级别

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

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

Answer 1

我建议准备一个 Kendo 数据源。 1) 使用 transport

将数据读入您的数据源

2) kendo数据源支持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"
});
});

Answer 2

这应该可以完成工作

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 对象

如何使用 JQuery 搜索 JSON 字符串

How to search JSON string using JQuery

javascript

treeview

jquery

kendo-ui

kendo-treeview