JSON – Sintaxe de Leitura

Agora que já aprendemos o básico de JS (veja a aula aqui) vamos entender como funciona o JSON. Sua sintaxe é nativa do próprio JS portanto, não precisamos baixar nenhum framework ou biblioteca para programarmos em JSON.

Para lermos dados com JSON, os dados devem estar em um vetor com a seguinte estrutura:

var dados = {“Dado 1″:”Valor do Dado 1”, “Dado 2″:”Valor do Dado 2”, “Dado 3″:”Valor do Dado 3”;

Exemplo

var pokemons = [{"Nome":"Pikachu","Tipo":"Electro","Categoria":"Mouse","Número":"025"}];

A leitura destes dados se dá com a leitura do vetor, assim:

var pokemons = {"Nome":"Pikachu","Tipo":"Electro","Categoria":"Mouse","Número":"025"};
document.write(dados[0].Nome); // Irá exibir na tela o texto Pikachu

Para ler vários Pokémons, precisamos então de um vetor maior, ou seja, uma matriz exemplo:

var pokemons =
[
{"Nome":"Pikachu","Tipo":"Electro","Categoria":"Mouse","Número:","025"},
{"Nome":"Bulbasaur ","Tipo":"Grass","Categoria":"Seed","Número:","001"},
{"Nome":"Charmander","Tipo":"Fire","Categoria":"Lizard","Número:","003"}
];

Por ser uma matriz, não necessitamos mais do JSON.parse para realizar a leitura. A leitura ocorre naturalmente de acordo com o número da linha e o nome da coluna, assim;

document.write(pokemons[0].Nome); // retorna Pikachu
document.write(pokemons[2].Categoria); // retorna Seed

Exemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JSON - Leitura de dados</title>      
</head>
<body>

<script>    
    var pokemons = [
     {
		"Nome":"Pikachu",
		"Tipo":"Electro",
		"Categoria":"Mouse",
		"Número":"025"
     },
     {
		"Nome":"Bulbasaur",
		"Tipo":"Grass",
		"Categoria":"Seed",
		"Número":"001"
     },
     {
		"Nome":"Charmander",
		"Tipo":"Fire",
		"Categoria":"Lizard",
		"Número":"003"
	 }
	];
		document.write(pokemons[i].Nome + "<br>"); // escreve o valor do campo Nome
		document.write(pokemons[i].Tipo + "<br>");
		document.write(pokemons[i].Categoria + "<br>");
		document.write(pokemons[i].Número + "<br>");
		document.write("<hr>");
</script>
</body>
</html>

Agora, para ler todos os Pokemóns, basta programar um laço for

for(i = 0; i < pokemons.length; i++) {	
  document.write(pokemons[i].Nome + "<br>"); // escreve o valor do campo Nome
  document.write(pokemons[i].Tipo + "<br>");
  document.write(pokemons[i].Categoria + "<br>");
  document.write(pokemons[i].Número + "<br>");
  document.write("<hr>");
}

Exercícios

01. Crie uma aplicação JS com o nome de 8 políticos brasileiros e seu respectivo partido e Estado. Utilize a sintaxe JSON para vetorizar os dados e exibir na tela.

02. Crie uma aplicação JS com o nome de 5 personagens de Dragon Ball Z, seu respectivo KI e a qual planeta pertence. Utilize a sintaxe JSON para vetorizar os dados e exibir na tela.