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");
});
data
é esteJSON
a cima?$(document).on('change blur', "#searchterm", function(e){ /* ... */ });
tag
?$.getJSON
estás a usar oq
.