Como Trabalhar com JSON no JavaScript

1. O que é JSON?

JSON é um formato de dados que utiliza pares chave-valor, muito parecido com objetos em JavaScript. É um formato ideal para intercâmbio de dados, pois é leve, fácil de ler e simples de gerar. Aqui está um exemplo de um objeto JSON:

{
  "nome": "João",
  "idade": 30,
  "cidade": "São Paulo"
}

No exemplo acima, temos um objeto JSON com três propriedades: nome, idade e cidade, cada uma associada a um valor.

2. Convertendo JSON para Objeto JavaScript

Em JavaScript, é comum receber dados em formato JSON e convertê-los para um objeto JavaScript para que possam ser manipulados. A função JSON.parse() faz essa conversão.

Exemplo:

// String JSON
const jsonString = '{"nome": "João", "idade": 30, "cidade": "São Paulo"}';

// Convertendo JSON para objeto JavaScript
const objeto = JSON.parse(jsonString);

console.log(objeto.nome);  // Saída: João
console.log(objeto.idade); // Saída: 30

No exemplo acima, o jsonString é convertido em um objeto JavaScript, permitindo o acesso às suas propriedades.

3. Convertendo Objeto JavaScript para JSON

Quando você precisa enviar dados para um servidor ou armazená-los de forma estruturada, pode converter um objeto JavaScript para uma string JSON usando JSON.stringify().

Exemplo:

// Objeto JavaScript
const objeto = { nome: "Maria", idade: 25, cidade: "Rio de Janeiro" };

// Convertendo objeto JavaScript para JSON
const jsonString = JSON.stringify(objeto);

console.log(jsonString);
// Saída: {"nome":"Maria","idade":25,"cidade":"Rio de Janeiro"}

O método JSON.stringify() transforma o objeto em uma string JSON, que pode ser enviada em uma requisição HTTP ou armazenada no localStorage.

4. Trabalhando com Arrays JSON

Você também pode trabalhar com arrays em JSON, que podem conter objetos ou valores simples. A conversão de um array JSON para um array JavaScript funciona da mesma maneira.

Exemplo:

// Array JSON
const jsonArray = '[{"nome": "Ana", "idade": 22}, {"nome": "Carlos", "idade": 29}]';

// Convertendo JSON para array de objetos
const arrayObjetos = JSON.parse(jsonArray);

console.log(arrayObjetos[0].nome); // Saída: Ana

Este exemplo mostra como um array de objetos JSON é convertido em um array de objetos JavaScript.

5. Enviando e Recebendo JSON em Requisições HTTP

Em APIs modernas, o formato JSON é amplamente utilizado para enviar e receber dados. Com a API fetch do JavaScript, você pode enviar e receber JSON facilmente em requisições HTTP.

Exemplo de Envio de JSON (POST):

// Enviando dados JSON para uma API
fetch('https://api.exemplo.com/usuarios', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ nome: 'João', idade: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erro:', error));

Neste exemplo, estamos enviando dados em JSON para uma API usando o método POST. O corpo da requisição (body) contém uma string JSON gerada pela função JSON.stringify(). Os dados são enviados com o cabeçalho Content-Type definido como application/json.

Exemplo de Recebimento de JSON (GET):

// Recebendo dados JSON de uma API
fetch('https://api.exemplo.com/usuarios')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Erro:', error));

Ao receber dados de uma API, o método fetch() retorna uma Promise. O método response.json() converte a resposta em um objeto JavaScript, permitindo o acesso aos dados retornados pela API.

6. Armazenando JSON no Local Storage

O localStorage permite armazenar dados no navegador de forma persistente. Como ele só aceita strings, você pode armazenar dados JSON convertendo-os para strings com JSON.stringify() e recuperá-los posteriormente com JSON.parse().

Exemplo:

// Salvando dados no localStorage
const usuario = { nome: 'Pedro', idade: 35 };
localStorage.setItem('usuario', JSON.stringify(usuario));

// Recuperando dados do localStorage
const dadosUsuario = JSON.parse(localStorage.getItem('usuario'));
console.log(dadosUsuario.nome); // Saída: Pedro

O exemplo acima mostra como armazenar um objeto JavaScript no localStorage e recuperá-lo posteriormente.

Conclusão

Trabalhar com JSON em JavaScript é uma parte essencial do desenvolvimento web moderno, especialmente ao lidar com APIs. Com as funções JSON.parse() e JSON.stringify(), você pode facilmente converter dados entre JSON e objetos JavaScript. Essas habilidades são fundamentais para construir aplicações web interativas e integradas com serviços externos.