How to search JSON string using JQuery

Question

In my application which using web services and that web service method returns JSON string as follows,

[
   {
      "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"
         }
      ]
   }
]

I used this JSON with kendo treeview. This works fine with PC devices. But with the huge JSON set(above JSON is part of huge set) kendo treeview getting the lagging problem with tab and mobile devices. currently this JSON, I directly bind with kendo treeview. But to reduce the lagging problem and increase efficiency I need to bind the JSON string to kendo treeview after filtration. Then I don't need to bind all this huge JSON and only bind relevant JSON. I think to achieve this I need to create another function to search/filter this huge JSON results. as an example, when the search key = Hollywood I need to return following JSON(only relevant branch details and remove other parts "No":"1108" and "No":"1107")

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

eg: 2 when the search key = East, I need to return following JSON result.which means I need to search Area value in both Root level and Branch level

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

How to do that using JQuery function or another proper way.

Answer 1

This should get the job done

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
    }

This will A) loop through the top-level. If a match is found it will be added to the results tree

B) If the top level has the specified child then the function will be called again with the child as the top level and the parent (OP) added to another array. Then if a match is found in the child it will be added to the OP before the OP is added to the results tree at the end of the loop

Example call:

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

Where "tree" is your original JSON object