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.