WDD 231: Desenvolvimento Frontend para Web I

S02 – Atividade de Aprendizagem: JSON

Visão Geral

Sempre que informações são passadas de um programa para outro ou salvas em disco, os dados precisam ser formatados de forma que possam ser compreendidos. JSON é um formato muito popular para armazenar dados, e quase todos os sites o utilizam de alguma forma porque é simples, fácil de usar e bastante flexível.

Nesta atividade de aprendizagem, você aprenderá sobre o formato JSON e como criar um arquivo JSON para ser usado mais para frente.

O formato JSON é fundamental e será utilizado em todo o programa de Desenvolvimento de Software.

Preparação

JSON significa JavaScript Object Notation e é um formato simples de troca de dados. Ele é frequentemente usado para transmitir dados entre um servidor e o cliente, também podendo ser usado para arquivos de configuração e armazenamento de dados.

JSON é um formato baseado em texto, fácil de ler e entender tanto para pessoas quanto para computadores, e pode ser usado por qualquer linguagem de programação.

Em JSON, você armazena listas (ou mais precisamente, dicionários) de pares de chave-valor no formato chave:valor, por exemplo, "nome": "John". Para armazenar vários pares de chave-valor, coloque-os entre chaves { } e separe-os com vírgulas, assim:

{
  "nome": "John",
  "sobrenome": "Taylor",
  "idade": 34
}

Espaços em branco, como novas linhas e recuos, não são necessários, mas ajudam na leitura por parte de quem for analisar os dados.

Além disso, observe que as strings são especificadas entre aspas " " neste exemplo, mas elas não são usadas para números ou para os valores booleanos true e false.

Colchetes [ ] são usados para criar um array ou uma lista de valores, em vez de pares de chave-valor.

Além da estrutura simples mostrada acima, os próprios valores podem ser dicionários que formam estruturas aninhadas. Abaixo está um exemplo mais complexo que inclui uma lista de valores para "cursos", usando colchetes [ ] e uma estrutura aninhada para o "endereço":

{
  "nome": "Sariah Lucias",
  "idade": 27,
  "estudanteAtual": true,
  "cursos": ["WDD231", "CSE210", "REL340"],
  "endereco": {
    "rua": "123 Bedford Road",
    "cidade": "Gweru",
    "estado": "Província de Midlands",
    "pais": "Zimbábue",
    "cep": "00000"
  }
}

Observe que o exemplo acima é um objeto JSON válido com pares de chave-valor. As chaves são colocadas entre aspas duplas e os pares de chave-valor são separados por vírgulas. O exemplo contém tipos de dados variados, incluindo strings ("Sariah Lucias"), números (27), booleanos (true), arrays (["WDD231", "CSE210", "REL340"]) e objetos aninhados (endereço).

Confira abaixo alguns pontos importantes sobre JSON:

• JSON é um formato leve, baseado em texto, de troca de dados que é fácil de ler e escrever para humanos e fácil de interpretar e gerar para máquinas.
• JSON é independente de linguagem, ou seja, pode ser usado com qualquer linguagem de programação compatível com formatos de dados baseados em texto.
• JSON é frequentemente usado em aplicações da web para trocar dados entre um cliente e um servidor.
• JSON é bastante semelhante à forma como os objetos do JavaScript são armazenados, por isso pode ser facilmente convertido em um objeto nativo dessa linguagem.
• JSON é escrito usando pares básicos de chave-valor no formato chave:valor e é compatível com strings, números, arrays, booleanos e outros literais de objeto. Não há métodos.
• JSON exige o uso de aspas duplas em nomes de strings e propriedades, além de seguir rigorosamente a o posicionamento de vírgulas e dois-pontos.
• JSON não contém nem permite comentários.
• Arquivos JSON geralmente usam a extensão .json.

Usando dados JSON em JavaScript

Saber trabalhar com dados JSON em JavaScript é essencial, principalmente ao lidar com APIs ou ao armazenar dados estruturados.

Você pode criar um objeto JavaScript nativo diretamente ou carregá-lo de uma string JSON. A seguir, mostramos como criar um objeto diretamente (sem usar JSON):

const objetoEstudante1 = {
  nome: "John",
  idade: 25,
  estudante: true
};

Observe que isso é muito semelhante ao formato de string JSON acima, mas tem diferenças. Por exemplo, as chaves não têm aspas.

Para criar um objeto a partir de uma string de dados JSON, use o método integrado JSON.parse(). Ele converterá a string JSON em um objeto JavaScript. É útil para analisar dados JSON recebidos de um servidor ou de um arquivo local.

const jsonString = '{"nome": "John", "idade": 25, "estudante": true}';

const objetoEstudante2 = JSON.parse(jsonString);

Para converter um objeto JavaScript nativo em uma string JSON, use o método integrado JSON.stringify(). Ele converte um objeto JavaScript em uma string JSON. É útil para enviar dados a um servidor ou salvá-los em um arquivo.

const estudanteJsonString = JSON.stringify(objetoEstudante1);

Instruções da Atividade

Para esta atividade, você criará um novo arquivo JSON e verificará se ele é válido.

Identifique a Estrutura

1. Abra este arquivo JSON de exemplo em uma nova aba. (Observe que o arquivo não contém quebras de linha nem recuos, e ainda assim, a maioria dos navegadores o formatará corretamente para deixar os dados mais fáceis de ler.)
2. Identifique alguns dos pares de chave-valor e tipos de dados usados neste exemplo.

   Aqui estão alguns exemplos de chaves (nomes de propriedades) encontradas no arquivo JSON.

   • chave: "localização", valor: "Delphi", tipo de dado: string
   • chave: "id", valor: 89.99, tipo de dado: número
   • chave: "emEstoque", valor: true, tipo de dado: Booleano
   • chave: "produtos", valor: (há três valores), tipo de dado: um array de objetos, cada um contendo cinco pares de chave-valor (propriedades)

Crie um Arquivo JSON

1. Crie um arquivo JSON para salvar informações sobre novos membros da ala.
2. Preencha este novo arquivo JSON com sintaxe válida, usando os seguintes requisitos de dados:
   1. Sobrenome da família
   2. Data em que a família se mudou para a ala
   3. O número de pessoas na família (número de registros)
   4. Recebeu visita do bispado?
   5. Dados individuais de membros da família
      1. Nome
      2. Gênero
      3. Data de nascimento
3. Teste seu arquivo JSON no navegador e valide-o usando uma ferramenta como o JsonOnline.net ou outro validador/formatador de JSON.

{
  "sobrenome": "Santos",
  "data_de_mudanca": "2024-06-24",
  "numero_de_pessoas": 4,
  "visita_do_bispado": true,
  "membros_da_familia": [
    {
      "nome": "Pedro Santos",
      "genero": "Masculino",
      "data de nascimento": "1990-05-15"
    },
    {
      "nome": "Maria Santos",
      "genero": "Feminino",
      "data de nascimento": "1992-08-20"
    },
    {
      "nome": "Andrea Santos",
      "genero": "Feminino",
      "data de nascimento": "2010-03-05"
    },
    {
      "nome": "Luiz Santos",
      "genero": "Masculino",
      "data de nascimento": "2012-11-10"
    }
  ]
}