JSON do JavaScript

JSON é um formato de armazenamento e transmissão de dados.

JSON é frequentemente usado quando os dados são enviados do servidor para a página da web.

O que é JSON?

  • JSON é uma abreviação de JavaScript Object Notation JavaScript Object Notation
  • O JSON é um formato de troca de dados leve
  • O JSON é independente de linguagem *
  • O JSON é "auto-descriptivo" e fácil de entender

* A sintaxe JSON é derivada da sintaxe de símbolos de objetos JavaScript, mas o formato JSON é texto puro. O código para ler e gerar dados JSON pode ser escrito em qualquer linguagem de programação.

Exemplo JSON

A sintaxe JSON define um objeto funcionário: um array que contém três registros de funcionários (objetos):

Exemplo JSON

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

O formato JSON é avaliado como objeto JavaScript

O formato JSON é semelhante ao código para criar objetos JavaScript.

Devido a essa semelhança, os programas JavaScript podem facilmente converter dados JSON em objetos JavaScript locais.

Regras de sintaxe JSON

  • Os dados são pares de nome/valor
  • Os dados são separados por vírgulas
  • As chaves salvam o objeto
  • Os colchetes salvam o array

Dados JSON - Nome e valor

Os dados JSON são escritos em pares de nome/valor, semelhantes às propriedades de objetos JavaScript.

Os pares de nome/valor são constituídos pelo nome do campo entre aspas duplas, seguido de dois pontos e, em seguida, o valor:

"firstName":"Bill"

Os nomes JSON precisam de aspas duplas. Os nomes JavaScript não precisam.

Objeto JSON

Os objetos JSON são escritos dentro de chaves.

Como o JavaScript, os objetos podem conter múltiplos pares de nome/valor:

{"firstName":"Bill", "lastName":"Gates"}

Array JSON

Os arrays JSON são escritos em colchetes.

Como o JavaScript, os arrays podem conter objetos:

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

No exemplo acima, o objeto "employees" é um array. Ele contém três objetos.

Cada objeto representa um registro de uma pessoa (com nome e sobrenome).

Converter o texto JSON em objeto JavaScript

O uso usual do JSON é ler dados de um servidor web e exibir dados na página da web.

Para simplificar, pode-se usar uma string como entrada de demonstração.

Primeiro, crie uma string JavaScript contendo a sintaxe JSON:

var text = '{ "employees" : [
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

Então, use a função integrada JSON.parse() do JavaScript para converter esta string em um objeto JavaScript:

var obj = JSON.parse(text);

Por fim, use este novo objeto JavaScript em sua página:

Exemplo

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Experimente você mesmo

Você pode experimentar em nossas Tutorial JSON Leia mais sobre JSON aqui.