Como trabalhar com JSON em JavaScript

introdução

porque JSON é derivado da linguagem de programação JavaScript, é uma escolha natural para usar como um formato de dados em JavaScript. JSON, abreviação de JavaScript Object Notation, é geralmente pronunciado como o nome “Jason.”

para saber mais sobre JSON em termos gerais, leia o tutorial “An Introduction to JSON”.

para começar a pensar sobre onde pode usar o JSON nos seus programas JavaScript, alguns casos de uso geral do JSON incluem::

• armazenar dados
• gerar estruturas de dados a partir da entrada do utilizador
• transferir dados do servidor para o cliente, cliente para o servidor, e servidor para o servidor
• configurar e verificar dados

este tutorial irá fornecer-lhe uma introdução ao trabalho com o JSON em JavaScript. Para aproveitar ao máximo esta introdução, você deve ter alguma familiaridade com a linguagem de programação JavaScript.

JSON Format

json’s format is derived from JavaScript object syntax, but it is entirely text-based. É um formato de dados chave-valor que é tipicamente renderizado em Chavetas.

Quando você está trabalhando com JSON, você provavelmente verá objetos JSON em um arquivo .json, mas eles também podem existir como um objeto JSON ou string dentro do contexto de um programa. Leia mais sobre a sintaxe e estrutura aqui.

When you’re working with a .json file, it will look like this:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Se, em vez disso, você tem um objeto JSON em um .js ou .html arquivo, você provavelmente verá uma variável:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Além disso, você pode ver JSON como uma cadeia de caracteres ao invés de um objeto dentro do contexto de um programa em JavaScript script ou arquivo. Neste caso, você também pode ver tudo em uma linha:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

converter objetos JSON em strings pode ser particularmente útil para o transporte de dados de uma maneira rápida.

percorremos o formato geral do JSON e como pode esperar vê-lo como um.json ficheiro, ou dentro do JavaScript como um objecto ou uma cadeia de caracteres.

comparação com objeto JavaScript

vale a pena ter em mente que JSON foi desenvolvido para ser usado por qualquer linguagem de programação, enquanto objetos JavaScript só podem ser trabalhados diretamente através da linguagem de programação JavaScript.

em termos de sintaxe, objetos JavaScript são semelhantes a JSON, mas as chaves em objetos JavaScript não são strings entre aspas. Além disso, objetos JavaScript são menos limitados em termos de tipos passados a valores, então eles podem usar funções como valores.

vamos olhar para um exemplo de um objeto JavaScript do usuário do site Sammy Shark que está atualmente online.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Este vai ser muito familiar para você como um objeto JSON, mas há sem aspas ao redor de qualquer uma das teclas (first_namelast_nameonline, ou full_name), e há uma função de valor na última linha.

Se quisermos acessar os dados no objeto de JavaScript acima, podemos usar a notação de ponto para chamar user.first_name; e obter uma seqüência de caracteres, mas se quisermos acessar o nome completo, seria necessário fazê-lo chamando user.full_name(); porque é uma função.

objetos JavaScript, só pode existir dentro da linguagem JavaScript, então, quando você está trabalhando com dados que precisam ser acessados por várias línguas, é melhor optar por JSON.

acessando dados JSON

os dados JSON são normalmente acessados em Javascript através da notação de pontos. Para entender como isso funciona, vamos considerar o objeto JSON sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

para acessar qualquer um dos valores, vamos usar a notação de ponto que se parece com isso:

sammy.first_namesammy.last_namesammy.online

A variável sammy é primeira, seguido por um ponto, seguido da tecla a ser acessado.

Para criar um alerta de JavaScript que nos mostra o valor associado à chave first_name em uma janela pop-up, nós pode fazer isso chamando o JavaScript alert() função:

alert(sammy.first_name);

Output
Sammy

Aqui, temos chamada com êxito o valor associado com o first_name chave sammy objeto JSON.

também podemos usar a sintaxe do suporte quadrado para acessar dados de JSON. Para isso, manteríamos a chave entre aspas quadradas. For oursammy variable above, using square bracket syntax in an alert() function looks like this:

alert(sammy);

Output
true

Quando você estiver trabalhando com aninhados elementos de matriz, você deve ligar para o número do item na matriz. Vamos considerar o JSON abaixo:

var user_profile = { "username" : "SammyShark", "social_media" : }

Para acessar a string facebook, podemos chamar esse item na matriz dentro do contexto da notação de ponto:

alert(user_profile.social_media.description);

Output
facebook

Observe que, para cada elemento aninhado vamos usar um ponto adicional.

Usando a notação de pontos ou a sintaxe do suporte quadrado permite-nos aceder aos dados contidos no formato JSON.

funções para trabalhar com JSON

Esta secção irá analisar dois métodos para stringifying e parsing JSON. Ser capaz de converter JSON de objeto para cadeia e vice-versa é útil para a transferência e armazenamento de dados.

JSON.stringify ()

The JSON.stringify() function converts an object to a JSON string. Strings são úteis para o transporte de dados de um cliente para um servidor através do armazenamento ou transmissão de informações de forma leve. Por exemplo, você pode reunir as configurações de um usuário no lado do cliente e, em seguida, enviá-los para um servidor. Mais tarde, você pode então ler a informação com o método JSON.parse() e trabalhar com os dados conforme necessário.

Nós vamos olhar para um objeto JSON que podemos atribuir à variável obj e, em seguida, vamos convertê-lo usando o JSON.stringify() passando obj para a função. Podemos atribuir esta string à variável s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

Agora, se trabalharmos com s, teremos o JSON disponível para nós como uma string ao invés de um objeto.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

The JSON.stringify() function lets us convert objects to strings. Para fazer o oposto, vamos olhar para a função JSON.parse().

JSON.parse ()

Strings são úteis para o transporte, mas você vai querer ser capaz de convertê-los de volta para um objeto JSON no cliente e/ou do lado do servidor. Embora você possa converter texto para um objeto com a função eval(), não é muito seguro, então vamos usar a função JSON.parse().

para converter o exemplo no JSON.stringify() seção acima, poderíamos passar a seqüência de caracteres s a função e atribuir a ele uma nova variável:

var o = JSON.parse(s)

em Seguida, teríamos o objeto o trabalhar com, que deverá ser idêntico ao objeto obj.

Para dar uma olhada mais profunda, vamos considerar um exemplo de JSON.parse() dentro do contexto de um arquivo HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

Dentro do contexto de um arquivo HTML, podemos ver como o JSON string s é convertido para um objeto que é recuperável no final de renderização da página, acessando o JSON através da notação de ponto.

JSON.parse() é uma função segura para processar cadeias de JSON e convertê-las em objetos.

conclusão

JSON é um formato natural para usar em JavaScript e tem muitas implementações disponíveis para uso em muitas linguagens de programação populares. Se você quiser usar o formato em outra linguagem de progamming, você pode ver Suporte de linguagem completo no site” introduzindo JSON”.por ser leve e facilmente transferido entre linguagens de programação e sistemas, JSON tem experimentado um maior suporte no APIs, incluindo a API do Twitter.