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?

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

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.

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.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".