Dados JSON - Curso de Javascript

Aulas

Curso de Javascript – Aula 9 | Manipulação de Dados JSON

1 ano atrás

Nesta aula, vamos explorar o formato JSON (JavaScript Object Notation), uma forma popular de representar dados estruturados que é amplamente utilizada para a troca de informações entre aplicações web e servidores. Enfim, o JSON é um formato de texto simples e leve, o que o torna ideal para enviar e receber dados via requisições HTTP em APIs.

O que é JSON

JSON é uma forma de representar dados em formato de texto, usando uma estrutura de chave-valor. Ou seja, os dados podem ser representados como objetos (delimitados por {}), arrays (delimitados por []) ou tipos de dados simples, como strings, números e booleanos. Enfim, a sintaxe do JSON é muito semelhante à notação de objetos em JavaScript.

Exemplo de um objeto

{
  "nome": "João",
  "idade": 30,
  "profissao": "Desenvolvedor"
}

Principais Características do JSON

Leve e fácil de ler: O JSON é um formato de texto simples e legível, tanto para humanos quanto para máquinas.
Linguagem-agnostic: Pode ser utilizado em várias linguagens de programação, não se restringindo apenas ao JavaScript.
Suporte a estruturas: O JSON pode representar objetos, arrays e tipos de dados primitivos.

Convertendo um objeto JavaScript para JSON

Podemos converter um objeto JavaScript para JSON usando o método JSON.stringify(). Enfim, esse método recebe o objeto como argumento e retorna uma string contendo a representação JSON do objeto.

Exemplo de conversão de objeto JavaScript para JSON:

const pessoa = {
  nome: "Maria",
  idade: 25,
  profissao: "Engenheira"
};

const jsonPessoa = JSON.stringify(pessoa);
console.log(jsonPessoa);

Convertendo JSON para objeto JavaScript

Para converter uma string JSON para um objeto JavaScript, utilizamos o método JSON.parse(). Ou seja, esse método recebe a string JSON como argumento e retorna um objeto JavaScript correspondente.

Exemplo de conversão de JSON para objeto JavaScript:

const jsonPessoa = '{"nome": "Maria", "idade": 25, "profissao": "Engenheira"}';
const pessoa = JSON.parse(jsonPessoa);
console.log(pessoa);

Enviando dados em JSON para uma API

Ao realizar uma requisição HTTP para uma API, podemos enviar dados no corpo da requisição em formato JSON. Enfim, isso é comum em operações de criação e atualização (POST e PUT), onde precisamos enviar informações para o servidor.

Exemplo de envio de dados em JSON para uma API usando o método POST:

const dados = {
  nome: "Pedro",
  idade: 28,
  profissao: "Designer"
};

fetch('https://api.exemplo.com/pessoas', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(dados)
})
.then(response => response.json())
.then(resultado => console.log(resultado))
.catch(erro => console.error('Erro na requisição:', erro));

Recebendo JSON de uma API

Quando fazemos uma requisição a uma API, geralmente recebemos os dados de resposta em formato JSON. Ou seja, podemos então usar o método response.json() para extrair os dados da resposta.

Exemplo de recebimento de uma API usando o método GET:

fetch('https://api.exemplo.com/pessoas/1')
.then(response => response.json())
.then(dados => console.log(dados))
.catch(erro => console.error('Erro na requisição:', erro));

O formato JSON é uma ferramenta poderosa para representar e trocar dados estruturados entre aplicações web e servidores. Além disso, com as técnicas de conversão entre objetos JavaScript e JSON, podemos enviar e receber informações de APIs de forma eficiente e confiável. Enfim, combinando o uso do formato JSON com a Fetch API, podemos criar aplicações web interativas e dinâmicas, aproveitando a simplicidade e a flexibilidade que o JSON oferece. Enfim, no próximo módulo, continuaremos explorando as possibilidades de manipulação e aprofundaremos nossos conhecimentos nesta área fundamental do desenvolvimento web.