Para ler um arquivo ou uma estrutura de dados jSON usando jQuery é muito fácil.
Aprenda a usar o $.get do jQuery
De acordo com a Documentação do jQuery, uma das formas de ober valores de uma saída jSON externa a sua aplicação WEB é usando o seletor $.get, sua sintaxe é a seguinte;
$.get( "http://endereco-da-estrutura-json/", function(data) {
// códigos a serem executados aqui...
});
Exemplo – Como ler uma saída jSON usando $.get do JQuery
Considere a seguinte saída jSON, visto na aula JSON – Criando o Web Service.
http://appcinema.esy.es/mobile/lista_ofertas.php
Para a fazer a leitura precisamos apenas seguir a estrutura do $.get, ficando assim;
$(document).ready(function(){
$.get( "http://appcinema.esy.es/mobile/lista_ofertas.php", function(data) {
console.log('encontrei ' + data.length + ' registros');
console.log(data[0]);
});
});
O resultado será este;
Como ler todas as linhas da saída jSon com jQuery
No exemplo acima executamos o comando console.log(data[0]) , isso faz com que somente a primeira linha do json seja exibida. Então, para lermos as linhas seguintes basta usarmos um lanço de repetição for(), haja vista que já sabemos quantos registros foram encontrados na saída json com o comando data.length.
Ficando;
$(document).ready(function(){
$.get( "http://appcinema.esy.es/mobile/lista_ofertas.php", function(data) {
console.log('encontrei ' + data.length + ' registros');
for(linha=0; linha < data.length; linha++)
{
console.log('Registros da linha ' + linha);
console.log(data[linha]);
}
});
});
O resultado será:
Como ler os dados e valores do jSON separadamente
Essa é a parte que muitos desistem de querer entender como trabalhar com jSON x jQuery, mas perceba que uma estrutura json é um vetor, então podemos tratá-lo como objetos. A sacada aqui é que não precisamos converter os valores em objetos como fazemos no JavaScript puro.
Basta usar o número da linha e o nome do campo como índices ficando assim:
$(document).ready(function(){
$.get( "http://appcinema.esy.es/mobile/lista_ofertas.php", function(data) {
console.log('encontrei ' + data.length + ' registros');
for(linha=0; linha < data.length; linha++)
{
console.log('');
console.log('REGISTROS DA LINHA' + linha);
console.log('ID da Promoção: ' + data[linha].id_promocao);
console.log('Nome do Mercado: ' + data[linha].nome_do_mercado);
console.log('Produto: ' + data[linha].produto);
console.log('Valor: ' + data[linha].valor);
}
});
});
O resultado será:
Prontinho!
Exemplo com o código completo
Veja o código abaixo em ação aqui: http://aulas-profanderson.azurewebsites.net/tpi/leitura-json-com-jquery/
<html>
<head>
<meta charset='utf-8'>
<title>Promoções de Mercado</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div id="resultado">carregando...</div>
<script>
var dadosjSon = '';
$(document).ready(function(){
$.get( "http://appcinema.esy.es/mobile/lista_ofertas.php", function(data) {
console.log('encontrei ' + data.length + ' registros');
for(linha=0; linha < data.length; linha++)
{
dadosjSon += '<hr/>REGISTROS DA LINHA ' + linha;
dadosjSon += '<hr/>ID da Promoção: ' + data[linha].id_promocao;
dadosjSon += '<br/>Nome do Mercado: ' + data[linha].nome_do_mercado;
dadosjSon += '<br/>Produto: ' + data[linha].produto;
dadosjSon += '<br/>Valor: ' + data[linha].valor;
}
$('#resultado').html(dadosjSon);
});
});
</script>
</body>
</html>
E se a estrutura jSon for multi valorada?
APIs como a do Facebook, Google, entre outras normalmente retornam uma estrutura jSon multi valorada, ou seja, um único campo pode ter vários valores diferentes. Por exemplo;
{
"Cliente": [
{
"Nome": "Anderson Oliveira",
"dtNasc": "1984-01-23",
"CPF": "12345678910"
},
{
"Nome": "Sergio Montagner",
"dtNasc": "0001-01-01",
"CPF": "00000000001"
}
]
}
Para ler dados deste tipo bastaria usar o campos com índice, exemplo data[linha].Cliente.Nome. Veja um exemplo usando a API da accuweather nesta aula https://www.blogson.com.br/como-mostrar-as-condicoes-do-tempo-em-seu-site-ou-aplicativo/, aonde lei valores multivalorados.