Um Tutorial sobre como Trabalhar com JSON em JavaScript

Introdução

Existem muitas maneiras pelas quais o JSON pode ser usado no JavaScript. Um de seus usos mais básicos é o armazenamento de dados. Você também pode usá-lo para transferir dados entre clientes, entre servidores ou do servidor para o cliente. Outras aplicações úteis incluem a capacidade de configurar e verificar dados, bem como gerar estruturas de dados.

Neste tutorial, nós exploraremos como você pode usar o JSON em seus programas JavaScript. Se você tiver experiência anterior em programação com JavaScript, isso deve parecer simples para você.

O que é JSON?

JSON significa JavaScript Object Notation. É um formato projetado para permitir o compartilhamento de diferentes tipos de dados. O JSON utiliza principalmente o JavaScript como sua linguagem de programação primária. Ele também funciona com outras linguagens como Python, PHP, Ruby, bem como Java. É fácil de ler, extremamente leve e não requer muita formatação. Você pode se familiarizar com a sintaxe e a estrutura geral do formato seguindo nosso tutorial: An Overview of the JSON Data Sharing Format.

O JSON pode ser usado por si só ou definido em outro formato de arquivo. Quando usado por si só, ele utiliza a extensão .json. Quando em outro formato, ele aparece como uma string JSON entre aspas ou como um objeto atribuído a uma variável. Por exemplo, o JSON também pode ser usado no formato .html. Esse formato permite que você realize a transferência de dados entre o servidor e o navegador com relativa facilidade.

O formato JSON é baseado em texto. Os dados de chave-valor aparecem entre chaves. Aqui está como um arquivo típico .json se parece:

Se você tiver um objeto JSON em um arquivo .js ou .html, ele aparecerá como uma variável assim:

Em alguns casos, você pode vê-los todos em uma única linha. Isso ocorre quando o JSON é renderizado como uma string em vez de um objeto no arquivo JavaScript:

Você pode converter objetos JSON em strings. Isso é útil quando você deseja realizar uma transferência rápida de dados.

JSON vs Objeto JavaScript

Como mencionamos antes, o JSON funciona com qualquer linguagem de programação. No entanto, você só pode trabalhar com objetos JavaScript usando JavaScript. A sintaxe no JSON e no JavaScript é semelhante. A diferença é que os objetos JavaScript aparecem em strings em vez de aspas. Além disso, os objetos JavaScript podem usar funções como valores, o que significa que são menos limitados.

No exemplo a seguir, estamos mostrando a opção JavaScript de um usuário. O usuário é Sammy Shark e ele está online agora:

Como você pode ver, não há aspas em torno de nenhuma chave como first_name, last_name, online, ou full_name. Além disso, há um valor de função colocado na última linha. Se você quiser acessar os dados em forma de string, você pode chamar user.first_name usando a notação de ponto. Se você quiser o nome completo, você usará user.full_name(), pois é uma função.

Como Acessar Dados JSON

Como mencionamos na última seção, você pode acessar dados JSON no JavaScript usando a notação de ponto. Vamos pegar o exemplo de um objeto JSON chamado sammy:

Nossa notação de ponto para acessar os valores será:

A variável vem primeiro. Depois disso, colocamos um ponto. Por fim, mencionamos a chave que queremos acessar.

Digamos que queremos criar um alerta em JavaScript que mostre o valor da first_name chave. Para fazê-la aparecer em um pop-up, usaremos a função JavaScript alert() assim:

Outra maneira de acessar os dados do JSON é usando a sintaxe de colchetes. A chave deve ser colocada entre aspas duplas dentro dos colchetes. Aqui está uma continuação do exemplo anterior:

E se você estiver trabalhando com elementos de array aninhados? Neste caso, você deve chamar o número do item no array. Veja o seguinte exemplo:

Digamos que desejamos acessar a string facebook. Aqui está como usaremos a notação de ponto para acessar esse item no array usando seu número:

Lembre-se de adicionar um ponto adicional para cada elemento aninhado.

Funções Usadas com JSON

A seguir, veremos algumas funções que você pode usar com JSON. A transferência e o armazenamento de dados tornam-se bastante fáceis quando você pode converter JSON de objeto para string ou de string para objeto. Vamos explorar como você pode converter em string (stringify) e analisar (parse) JSON de duas maneiras diferentes:

• JSON.stringify()

As strings são melhores para usar quando se tenta transferir dados de maneira leve. É por isso que são usadas para armazenar e transferir dados do cliente para o servidor. Considere o seguinte exemplo. Digamos que você esteja coletando dados das configurações do usuário em uma máquina. Você precisa enviar essas informações para o seu servidor. Você usaria uma string para essa finalidade. Depois, você pode convertê-la de volta usando JSON.parse() para lê-la e trabalhar com ela.

A função que destacaremos aqui é JSON.stringify(). Esta função converte um objeto JSON em uma string JSON. Neste exemplo, atribuiremos nosso objeto à variável obj. Nós o converteremos usando a função  JSON.stringify(). Para fazer isso, passaremos o obj para a função e, em seguida, atribuiremos a string à variável s assim:

Chamar a variável s retornará o JSON como string:

• JSON.parse()

Como é de se esperar, JSON.parse() serve para a função oposta. Depois de terminar de transportar os dados, você precisa convertê-los de volta para um objeto JSON para poder trabalhar com eles. Uma opção é usar a função eval(). No entanto, essa abordagem não é muito segura. É por isso que preferimos usar a função JSON.parse() .

Considere o exemplo anterior mais uma vez. Passaremos a string s para a função JSON.parse(). Em seguida, daremos a ela uma nova variável:

Nosso novo objeto agora é o. Ele será o mesmo que obj. Uma melhor compreensão surge quando consideramos JSON.parse() em um arquivo HTML como este:

Aqui, você pode realmente ver como convertemos a string s em um objeto recuperável. Assim, JSON.parse() é uma opção segura para converter strings JSON em objetos.

Conclusão

Como vimos ao longo deste tutorial, o JSON tem muitas implementações em JavaScript. Ele é especialmente útil porque pode ser usado com quase qualquer linguagem de programação, tornando-se a opção natural. Além disso, apenas arranhamos a superfície. Há muito mais que você pode fazer com o JSON. Ele já é suportado em APIs.

Aqui estão mais recursos do nosso blog que ajudarão você a programar com JavaScript:

• Aprenda como protótipos e heranças funcionam em Javascript.
• Explore em detalhes como adicionar JavaScript ao HTML.
• Se você estiver criando seu próprio aplicativo web, dê uma olhada em nosso guia sobre como escolher a melhor configuração de servidor.

Boa computação!