dimanche 20 mai 2018

Building a live search using AJAX in a 3 levels JSON file

I have wrote this function that gives me live search in my JSON file.

$(document.body).on("keyup", ".menuSearch", function() {
    $(".searchResults").html("");
    var searchField = $(".menuSearch").val();
    var expression = new RegExp(searchField, "i");
    $.getJSON("data2.json", function(data) {
      $.each(data, function(key, value) {
        if (value.name.search(expression) != -1 || value.age.search(expression) != -1) {
          $("#searchResults").append(
            '<li class="list-group-item" style="min-width: 95%;">' +
            '<p>' +
            value.name + '</p>' +
            '<p>' + value.age + '</p>' + '</li>');
        }
      });
    });
  });

However, it only works on my test JSON file that looks like this:

[{
 "name": "monir",
 "age": "23"
},
{
 "name": "adam",
 "age": "23"
},
{
 "name": "mounsif",
 "age": ""
},
{
 "name": "ivan",
 "age": "20"
}
]

But the the actual JSON file that i want to search has a structure like this:

[
{
    "link": { "title": "Applications" },
    "has_children": true,
    "subtree": [
        {
            "link": { "title": "Projects" },
            "subtree": [
                {
                    "link": { "title": "WORK\/NEW YORK" }
                },
                {
                    "link": { "title": "WORK\/NEW JERSEY" }
                }
            ]
        }
    ]
},
{
    "link": { "title": "Operations" },
    "has_children": true,
    "subtree": [
        {
            "link": { "title": "Projects" },
            "subtree": [
                {
                    "link": { "title": "WORK\/DALLAS" },
                    "subtree": [
                      {
                        "link": { "title": "WORK\/DALLAS 1.1" },
                        "subtree": [
                          {
                            "link": { "title": "WORK\/DALLAS 1.1.1" }
                          },
                          {
                            "link": { "title": "WORK\/DALLAS 1.1.2" }
                          }
                        ]
                      },
                      {
                        "link": { "title": "WORK\/DALLAS 1.2" }
                      }
                    ]
                }
            ]
        }
    ]
}
];

I am very new to JQUERY and AJAX and i do not know how to amend the code I wrote above to iterate on the above JSON file? will be kind enough to comment the code so i can learn something?

Thank you




Aucun commentaire:

Enregistrer un commentaire