JSON é um formato para armazenar e transportar dados.
JSON é frequentemente usado quando dados são enviados de um servidor para uma web página.
JSON significa JavaScript Object Notação
JSON é um formato leve de intercâmbio de dados
JSON é independente de idioma *
JSON é "autodescritivo" e fácil de entender
* A sintaxe JSON é derivada da sintaxe de notação de objeto JavaScript, mas o formato JSON é somente texto. Código para leitura e geração de dados JSON pode ser escrito em qualquer programação linguagem.
Esta sintaxe JSON define um objeto de funcionários: uma matriz de 3 registros de funcionários (objetos):
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}O formato JSON é sintaticamente idêntico ao código para criar Objetos JavaScript.
Devido a esta semelhança, um programa JavaScript pode facilmente converter dados JSON em nativos Objetos JavaScript.
Os dados estão em pares nome/valor
Os dados são separados por vírgulas
Aparelhos encaracolados seguram objetos
Colchetes contêm matrizes
Os dados JSON são escritos como pares nome/valor, assim como o objeto JavaScript propriedades.
Um par nome/valor consiste em um nome de campo (entre aspas duplas), seguido por dois pontos, seguido por um valor:
"firstName":"John"Os nomes JSON requerem aspas duplas. Nomes JavaScript não.
Objetos JSON são escritos entre chaves.
Assim como em JavaScript, os objetos podem conter vários pares nome/valor:
{"firstName":"John", "lastName":"Doe"}Matrizes JSON são escritas entre colchetes.
Assim como em JavaScript, um array pode conter objetos:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]No exemplo acima, o objeto “funcionários” é um array. Ele contém três objetos.
Cada objeto é um registro de uma pessoa (com nome e sobrenome).
Um uso comum do JSON é ler dados de um servidor web, e exibir os dados em uma página da web.
Para simplificar, isso pode ser demonstrado usando uma string como entrada.
Primeiro, crie uma string JavaScript contendo a sintaxe JSON:
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';Em seguida, use a função interna do JavaScript JSON.parse() para converter a string em um objeto JavaScript:
const obj = JSON.parse(text);Por fim, use o novo objeto JavaScript na sua página:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>
Você pode ler mais sobre JSON em nosso tutorial JSON.