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.
