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?
Ultima Online
Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras
Máquina de Pascal
A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.
Space Invaders
O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.
Civilization
A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.
Nintendo Entertainment System
O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.










