preloder

Como ler uma estrutura jSON com JQuery de forma fácil.

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 multvalorada?

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.

Deixe seu comentário