如何使用JQuery搜索JSON字符串

Posted 2021-04-11

在我的应用程序中，使用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"
         }
      ]
   }
]

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

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

例如：2当search key = East时，我需要返回以下JSON结果。这意味着我需要在根级别和分支级别中搜索Area值

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

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

答案

这应该完成工作

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

另一答案

我建议准备一个剑道数据源。 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"
});
});