Na aula anterior, aprendemos o que é JSON, como ele funciona e por que é tão usado na comunicação entre frontend e backend.
Agora chegou a hora de ver o JSON em situações reais, do jeito que ele aparece no dia a dia de quem desenvolve aplicações web.
🎯 Objetivo da aula
Ao final desta aula, você será capaz de:
- Ler JSONs reais vindos de APIs
- Navegar por estruturas JSON mais complexas
- Acessar arrays e objetos aninhados
- Transformar JSON em dados úteis para a aplicação
- Evitar erros comuns ao trabalhar com JSON
Projeto 1 — Lendo um JSON real de API
Vamos começar com um JSON retornado por uma API pública:
{ "id": 1, "name": "Leanne Graham", "email": "leanne@example.com", "address": { "city": "Gwenborough", "zipcode": "92998-3874" } } Suponha que esse objeto veio de uma API e já foi convertido para JavaScript.
const usuario =
{ id: 1, name: "Leanne Graham", email: "leanne@example.com", address: { city: "Gwenborough", zipcode: "92998-3874" } };
console.log(usuario.name);
console.log(usuario.address.city);
console.log(usuario.name); // Saída será "Leanne Graham"
console.log(usuario.address.city); // Saída será "Gwenborough" Projeto 2 — JSON com arrays
Agora vamos trabalhar com um JSON que contém uma lista de itens:
{ "pedidoId": 10, "itens":
[
{ "produto": "Mouse", "preco": 50 },
{ "produto": "Teclado", "preco": 120 }
]
} Convertendo isso para JavaScript:
const pedido = { pedidoId: 10, itens: [ { produto: "Mouse", preco: 50 }, { produto: "Teclado", preco: 120 } ] };
pedido.itens.forEach(item => {
console.log(item.produto + " - R$ " + item.preco);
});
console.log(item.produto + " - R$ " + item.preco); // Saída será: // "Mouse - R$ 50" // "Teclado - R$ 120" Projeto 3 — JSON vindo como texto
Agora um cenário muito comum: o JSON chega como texto e precisa ser convertido.
const jsonTexto = ` { "nome": "Ana", "habilidades": ["HTML", "CSS", "JavaScript"] } `;
const dados = JSON.parse(jsonTexto);
dados.habilidades.forEach(habilidade =>
{
console.log(habilidade);
});
console.log(habilidade); // Saída será: // "HTML" // "CSS" // "JavaScript" Projeto 4 — Preparando dados para enviar à API
Agora o caminho inverso: transformar dados JavaScript em JSON.
const novoUsuario = { nome: "Carlos", email: "carlos@email.com", ativo: true };
const jsonParaEnviar = JSON.stringify(novoUsuario);
console.log(jsonParaEnviar);
console.log(jsonParaEnviar); // Saída será '{"nome":"Carlos","email":"carlos@email.com","ativo":true}' Erros comuns em projetos reais
- Assumir que uma propriedade sempre existe
- Não verificar se um array está vazio
- JSON malformado
- Esquecer de converter JSON para objeto
Resumo da aula para nunca mais esquecer
- JSON aparece em formatos simples e complexos
- É comum trabalhar com objetos aninhados e arrays
JSON.parse()transforma texto em objetoJSON.stringify()prepara dados para envio- Projetos reais exigem atenção à estrutura do JSON
Na próxima aula, vamos começar um novo bloco: Introdução a módulos JavaScript, aprendendo a organizar melhor nossos projetos.
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
Você Sabia?
Tomb Raider - O Filme
Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.
Playstation
O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.
River Raid
O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.
ENIAC
O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.
Mario em Donkey Kong
O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.










