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
Sempre trate o JSON como um dado externo: ele pode mudar.

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 objeto
  • JSON.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.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais 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.

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.