search in json with ajax in specific field

Question

search in json with ajax in specific field

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

How to search data in a JSON with AJAX? I want to do the search in a JSON field called tag and show another field (title and url) in a div.

HTML:

<div class="Minimizado top-menu-invisible hidden-mobile hidden-md hidden-sm">
    <input id="searchterm" name="searchterm" />
    <button id="search">Buscar</button>
    <div id="results">
    </div>
</div>

JS:

<script>
    $("#searchterm").keyup(function(e) {
        var q = $("#searchterm").val();
        $.getJSON("userControls/HelpPaginas.json",
            function(data){
                $("#results").empty();
                $.each(data, function(i, item) {
                    $("#results").append("<div>" + item.title + "<br><br></div>");
                });
            }
        );
    });
</script>

JSON:

[{
    "Tag": "Toyota, Ford, Carro2, teste",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "Ford, chevy, opala, teste2",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "BMW, Audi, importado",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "Benz, Teste3, cars",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "GMC, Chevrolet, chevy, GM",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "HUMMER, 4x4, teste4, agora vai, teste com tag",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}]

But the worst error happens! not the error in the browser, it just does not search. It even makes the correct call in JSON but does not display in DIV

New JS:

 $.getJSON("../userControls/HelpPaginas.json", function (data) {
                        var html = [];

                        /* loop through array */
                        $.each(data, function (index, d) {
                            html.push("title: ", d.title, ", ",
                                      "tag: ", d.Tag, ", ",
                                      "url: ", d.Url, "<br>");
                        });

                        $("#results").html(html.join('')).css("background-color", "orange");
                    });

jquery ajax json

asked by anonymous 28.07.2015 / 16:10

2 answers

2

You can use a simple loop instead of using $ .each:

for (var i = 0; i < json.length; i++) {
    $("#results").append("<div>" + json[i].Title + "<br><br></div>");
    $("#results").append("<div>" + json[i].Tag + "<br><br></div>");
}

This will work as well:

for (var i = 0; i < json.length; i++) {
    html.push("title: ", json[i].Title, ", ",
              "tag: ", json[i].Tag, ", ",
              "url: ", json[i].Url, "<br>")});
}

28.07.2015 / 16:54

Check if a value is present in an array Uppercase Method for Metroframework

score 2 · Accepted Answer

Only if is missing if what the person typed corresponds to some tag

Just add this code in the loop:

$.each(data, function(i, item) {
    aux = item.Tag.trim().toLowerCase().split(",")
   if( aux.indexOf($("#searchterm").val().trim().toLowerCase()) >= 0 )
    {
        console.log("Encontrou")
        $("#results").append("<div>" + item.Title + "<br><br></div>");
    }

});

link