Quando pensamos em desenvolvimento web moderno, duas coisas estão sempre presentes: troca de dados entre sistemas e consumo de informações em tempo real.

Seja em uma aplicação de e-commerce, em uma rede social ou até mesmo em um simples formulário online, é essencial que o navegador consiga enviar informações para servidores e receber respostas de forma rápida e organizada.

É nesse contexto que entram dois protagonistas:

JSON (JavaScript Object Notation): o formato mais utilizado para representar e transportar dados entre aplicações.
Fetch API: a maneira moderna e simplificada de realizar requisições HTTP em JavaScript.

Antes do JSON, a comunicação entre sistemas era feita principalmente em XML, um formato mais pesado e verboso. Da mesma forma, antes do fetch, os desenvolvedores utilizavam XMLHttpRequest (XHR), que era mais complexo e menos intuitivo.

Hoje, dominar JSON e Fetch é praticamente obrigatório para qualquer pessoa que deseja evoluir no front-end ou back-end com JavaScript. Afinal, quase tudo no desenvolvimento web passa por APIs e aprender a consumir essas APIs é um dos primeiros passos para criar aplicações dinâmicas, conectadas e úteis.

Neste guia, você vai aprender:

O que é JSON, como ele funciona e onde é usado.
Diferenças entre JSON e XML.
Como converter JSON em objetos JavaScript e vice-versa.
O que é a Fetch API e como utilizá-la na prática para consumir dados de uma API.
Exemplos práticos comentados para aplicar imediatamente em seus projetos.

BORA CODAR!!!

1. O que é JSON?

JSON (JavaScript Object Notation) é um formato leve de troca de dados, baseado em texto.

Ele é amplamente utilizado porque é fácil de ler para humanos e simples de interpretar por máquinas.

Estrutura do JSON

Um JSON é formado por pares chave: valor, muito parecido com objetos em JavaScript:

{
  "nome": "Maria",
  "idade": 25,
  "ativo": true,
  "hobbies": ["leitura", "programação", "música"]
}

Regras principais:

Chaves sempre entre aspas duplas;
Valores podem ser: string, número, booleano, null, array ou objeto;
Não aceita comentários.

2. Onde o JSON é usado?

O JSON é a base da comunicação em APIs modernas. Ele é utilizado em:

Respostas de APIs REST (como dados de usuários, produtos, etc.);
Configurações de aplicações;
Armazenamento de dados em bancos NoSQL (como MongoDB);
Integração entre sistemas.

3. JSON x XML

Antes do JSON, o XML era amplamente utilizado.

Comparando:

Aspecto	JSON	XML
Legibilidade	Simples e direto	Verboso
Tamanho	Menor	Maior
Estrutura	Chave-valor	Tags aninhadas
Popularidade	APIs modernas	Mais usado em sistemas legados

👉 Hoje, JSON é preferido por ser mais leve e fácil de manipular em JavaScript.

4. Transformando JSON em Objeto JavaScript

Para converter JSON em objeto, usamos JSON.parse():

const jsonString = '{"nome":"Maria","idade":25}';
const objeto = JSON.parse(jsonString);

console.log(objeto.nome); // Maria

5. Transformando Objeto em JSON

Para converter um objeto em JSON, usamos JSON.stringify():

const usuario = { nome: "Carlos", idade: 30 };
const json = JSON.stringify(usuario);

console.log(json); // {"nome":"Carlos","idade":30}

6. O que é Fetch?

O Fetch API é a forma moderna de buscar ou enviar dados em JavaScript, substituindo o antigo XMLHttpRequest.

Ele é baseado em Promises, o que facilita trabalhar com requisições assíncronas.

7. Estrutura básica do Fetch

fetch("<https://api.exemplo.com/dados>")
  .then(response => response.json()) // converte resposta em JSON
  .then(data => console.log(data))   // manipula os dados
  .catch(error => console.error("Erro:", error));

Explicando:

fetch(url) → inicia a requisição.
.then(response => response.json()) → converte o retorno em JSON.
.then(data => … ) → usa os dados retornados.
.catch(error => … ) → trata erros, como falha de rede.

Exemplo prático: sorteando uma carta com Fetch (API do baralho)

O fluxo será: criar um baralho embaralhado → sortear 1 carta → mostrar a imagem e os dados da carta.

<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8" />
  <title>Sorteio de Carta com Fetch</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 40px; }
    button { padding: 10px 16px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600; }
    #sortear { background: #111; color: #fff; }
    #status { margin-top: 16px; }
    #carta { margin-top: 24px; display: flex; gap: 16px; align-items: center; }
    #carta img { width: 100px; height: auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
    .muted { color: #666; font-size: 14px; }
  </style>
</head>
<body>
  <h1>Sorteio de Carta (Fetch + JSON)</h1>
  <p class="muted">Este exemplo usa a <code>Fetch API</code> para consumir a API pública do baralho.</p>

  <button id="sortear">Sortear carta</button>
  <div id="status" class="muted"></div>

  <div id="carta" hidden>
    <img id="imgCarta" alt="Imagem da carta" />
    <div>
      <div><strong id="tituloCarta"></strong></div>
      <div class="muted" id="detalhesCarta"></div>
    </div>
  </div>

  <script>
    // URL base da API do baralho
    const BASE_URL = "<https://deckofcardsapi.com/api/deck>";

    // Referências a elementos da UI
    const botao = document.getElementById("sortear");
    const statusEl = document.getElementById("status");
    const blocoCarta = document.getElementById("carta");
    const imgCarta = document.getElementById("imgCarta");
    const tituloCarta = document.getElementById("tituloCarta");
    const detalhesCarta = document.getElementById("detalhesCarta");

    // Função utilitária para atualizar mensagens de status
    function setStatus(msg) {
      statusEl.textContent = msg;
    }

    // Tratamento de erros HTTP: lança erro se response.ok for false
    async function ensureOk(response) {
      if (!response.ok) {
        // Tenta extrair mais contexto do corpo (se houver)
        let info = "";
        try { info = await response.text(); } catch (e) {}
        throw new Error(`HTTP ${response.status} - ${response.statusText}${info ? ": " + info : ""}`);
      }
      return response;
    }

    // Função principal: cria baralho, embaralha e sorteia 1 carta
    async function sortearCarta() {
      try {
        // 1) Sinaliza carregando
        setStatus("Criando e embaralhando o baralho...");
        blocoCarta.hidden = true;

        // 2) Cria um baralho novo já embaralhado (deck_count=1)
        //    Ex.: GET /api/deck/new/shuffle/?deck_count=1
        const criarResp = await ensureOk(
          await fetch(`${BASE_URL}/new/shuffle/?deck_count=1`)
        );
        const criarData = await criarResp.json();
        // criarData contém { success, deck_id, remaining, shuffled }

        const deckId = criarData.deck_id;

        // 3) Informa próximo passo na UI
        setStatus("Sorteando 1 carta...");

        // 4) Sorteia 1 carta do baralho criado
        //    Ex.: GET /api/deck/{deck_id}/draw/?count=1
        const drawResp = await ensureOk(
          await fetch(`${BASE_URL}/${deckId}/draw/?count=1`)
        );
        const drawData = await drawResp.json();
        // drawData contém { success, deck_id, cards: [...], remaining }

        // 5) Extrai a primeira carta retornada
        const [carta] = drawData.cards;
        // carta possui campos como: value, suit, code, image, images.svg/png

        // 6) Atualiza a UI com a carta sorteada
        imgCarta.src = carta.image; // URL da imagem
        imgCarta.alt = `Carta ${carta.value} de ${carta.suit}`;
        tituloCarta.textContent = `${carta.value} de ${carta.suit}`;
        detalhesCarta.textContent = `Código: ${carta.code} • Restantes no baralho: ${drawData.remaining}`;
        blocoCarta.hidden = false;

        // 7) Finaliza status
        setStatus("Pronto! Carta sorteada com sucesso.");
      } catch (err) {
        // 8) Tratamento de erros (rede, HTTP, parsing)
        setStatus(`Falha ao sortear carta: ${err.message}`);
        blocoCarta.hidden = true;
        console.error(err);
      }
    }

    // 9) Liga o botão ao fluxo principal
    botao.addEventListener("click", sortearCarta);
  </script>
</body>
</html>

Explicação linha a linha (o que acontece e por quê)

const BASE_URL = "<https://deckofcardsapi.com/api/deck>"; Define a URL base para evitar repetir strings e reduzir erros.
Referências de DOM (getElementById) Capturamos botão, área de status e contêiner da carta para atualizar a interface conforme o fluxo.
setStatus(msg) Função pequena para centralizar a lógica de mensagens de carregamento/erro/sucesso.
ensureOk(response) Valida a resposta HTTP. Se response.ok for false (códigos 4xx/5xx), lança um Error com detalhes—boa prática para não “seguir o fluxo” com respostas inválidas.
sortearCarta() (função assíncrona principal):
- Status “carregando” e oculta o bloco de carta.
- Cria e embaralha um baralho novo: GET /new/shuffle/?deck_count=1.
  - Convertemos o retorno para JSON e capturamos deck_id (identificador único do baralho).
- Sorteia 1 carta: GET /{deck_id}/draw/?count=1.
  - Convertemos para JSON, pegamos a primeira carta do array cards.
- Atualiza a UI com a imagem e dados da carta (value, suit, code, remaining).
- Tratamento de erros abrangente no catch: mostra mensagem ao usuário e registra no console.
botao.addEventListener("click", sortearCarta); Conecta a interface ao fluxo de negócio (evento → ação).

Conclusão

Ao longo desta aula, vimos como JSON se consolidou como o formato padrão para troca de dados na web, oferecendo uma estrutura simples, leve e facilmente compreensível. Exploramos também a Fetch API, que trouxe uma forma moderna e mais intuitiva de realizar requisições HTTP em JavaScript, substituindo técnicas mais antigas e complexas.

No exemplo prático com a API do baralho, você acompanhou todo o processo de:

criar e embaralhar um baralho via requisição;
sortear uma carta de forma assíncrona;
interpretar a resposta JSON e atualizar a interface com os dados obtidos.

Esse exercício mostra, de forma aplicada, como conceitos fundamentais de JSON e Fetch se conectam no dia a dia do desenvolvimento web.

👉 Agora é sua vez: experimente adaptar o código para sortear mais de uma carta, criar um botão para embaralhar novamente ou até mesmo integrar a API a um pequeno jogo de cartas online. Quanto mais você praticar, mais natural será trabalhar com dados dinâmicos em suas aplicações.

Se você chegou até aqui, já deu um passo importante rumo a construir aplicações web interativas, conectadas e modernas. Continue explorando, testando APIs públicas e combinando esses recursos esse é o caminho para dominar o desenvolvimento com JavaScript.

🔗 Link GITHUB: https://github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-18-guilhermemachadodev

Guilherme Machado DEV

JSON e Fetch no JavaScript: Guia Completo para Iniciantes

1. O que é JSON?

Estrutura do JSON

2. Onde o JSON é usado?

3. JSON x XML

4. Transformando JSON em Objeto JavaScript

5. Transformando Objeto em JSON

6. O que é Fetch?

7. Estrutura básica do Fetch

Exemplo prático: sorteando uma carta com Fetch (API do baralho)

Explicação linha a linha (o que acontece e por quê)

Conclusão

Publicar comentário Cancelar resposta

Você pode ter perdido

Minha Jornada no Desenvolvimento Web: Aprendendo e Compartilhando com o Blog

Aula 1: Introdução ao JavaScript

Aula 2: Primeiro código em JavaScript

Aula 3: Aprendendo Variáveis e Tipos Primitivos

Aula 4: Utilizando operadores logicos e matematicos em Javascript