2

Como buscar dados em um JSON com AJAX ? Quero fazer a busca em um campo do JSON chamado tag e mostrar outro campo (title e url) em uma 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"
}]

Porém acontece o pior erro! não da erro no browser, apenas não busca. Ele até faz a chamada correta no JSON mas não exibe na DIV

Novo: Modifiquei o JS e trouxe os dados, mas ainda não busca, apenas retorna todos os dados, como buscar o campo tag?

Novo 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");
                    });
5
  • Realizando o debug no navegados o seu retorno em data é este JSON a cima? Commented 28/07/2015 às 14:24
  • Faça testes utilizando $(document).on('change blur', "#searchterm", function(e){ /* ... */ });
    – KaduAmaral
    Commented 28/07/2015 às 14:33
  • 1
    Queres fazer um filtro nos dados com base no campo tag?
    – KaduAmaral
    Commented 28/07/2015 às 14:51
  • sim...mas estou conseguindo agora com if (d.Tag.toLowerCase.search(CampoBusca) != -1) {
    – Dorath
    Commented 28/07/2015 às 14:55
  • Como estás a enviar os dados para o servidor? Não vejo onde nesse $.getJSON estás a usar o q.
    – Sergio
    Commented 28/07/2015 às 15:33

2 Respostas 2

2

Falta apenas o if pra verificar se o que a pessoa digitou corresponde a alguma tag

só adicionar esse codigo no 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>");
    }

});

https://jsfiddle.net/28j8Lxrq/2/

3
  • jefferson qual a diferença do modo que vc fez e o que eu acabei fazendo. if (d.Tag.search(CampoBusca) != -1) { gostei do toLowerCase assim padroniza tudo para minusculo só não entendi o split(,)
    – Dorath
    Commented 28/07/2015 às 16:48
  • 1
    Na verdade o seu código ao qual eu me baseei, não continha if... o split eu uso para separar as tags e pesquisar pelo valor exato... Commented 28/07/2015 às 16:56
  • entendo, seu jsfiddle parece q não está funcionando, mas entendi a lógica, vou testar aqui.
    – Dorath
    Commented 28/07/2015 às 18:26
2

Você pode usar um loop simples em vez de usar o $.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>");
}

Dessa outra forma também vai funcionar:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .