iwtraining

Trabalhando com JSON Front-end

Trabalhando com JSON

No passado, o XML foi o formato mais utilizado para transmissão de dados estruturados através da Internet. A primeira interção de serviços web foi baseada em XML, com destaque para comunicação servidor-servidor. O XML, apesar do seu sucesso, teve também os seus deStratores. Alguns acreditavam que a linguagem era excessivamente detalhada e redundante. Várias soluções surgiram para combater estes problemas, mas a Web já começou a se mover em uma nova direção.

Douglas Crockford especificou primeira JavaScript Object Notation (JSON) como IETF RFC 4627 em 2006. JSON é um subconjunto estrito do JavaScript, fazendo uso de vários padrões encontrados no JavaScript para representar dados estruturados. Crockford estendeu JSON como uma melhor alternativa para XML para acessar dados estruturados em JavaScript, uma vez que poderia ser passado diretamente para eval (), e não exigia a criação de um DOM.

A coisa mais importante que você precisa entender sobre JSON é que ele é um formato de dados, e não uma linguagem de programação. JSON não é uma parte do JavaScript, embora eles compartilham sintaxe. JSON também não é utilizada unicamente por JavaScript, uma vez que é um formato de dados. Existem analisadores e serializadores disponíveis em muitas linguagens de programação.

Sintaxe JSON permite a representação de três tipos de valores

  • Valores Simples – Strings, números, valores booleanos e nulos podem ser representados em JSON usando a mesma sintaxe JavaScript. Valores especiais, como o undefined, não podem ser representados.
  • Objetos – O primeiro tipo de dado complexo,  objetos representam pares de chave-valor. Cada valor pode ser um tipo primitivo, ou um tipo complexo.
  • Arrays – O segundo tipo de dado complexo, arrays representam uma lista ordenada de valores que podem ser acessados através de um índice numérico. Os valores podem ser de qualquer tipo, incluindo os valores simples, objetos e até mesmo outros arrays.

Não há variáveis, funções ou instâncias de objetos em JSON. JSON é tudo sobre a representação de dados estruturados e, embora partes se parecem com a sintaxe do JavaScript, não deve ser confundido com paradigmas de JavaScript.

Um JSON pode ter um valor simples, como 5 ou “texto”, e são igualmente respostas JSON válidas, porém não se vê por ai JSONs com apenas um valor como resposta, a representação mais comum dele é em forma de objeto.

Vamos ver como representar o seguinte objeto JavaScript:

var aluno = {
       nome: “Maria Joaquina”, 
       idade: 9
};

Versão em JSON:

{
     “nome”: “Maria Joaquina”, 
     “idade”: 9
}

Observe que o que difere o JSON do JavaScript é o fato que as chaves devem ser representadas com as  aspas duplas.

Agora um exemplo de um JSON um pouco mais complexo:

{
     “nome”: “Maria Joaquina”, 
     “idade”: 9, 
     “escola”: {
            “nome”: “Escola Mundial”,
            “localizacao”: “SBT” 
      }
}

Representando Arrays no JSON

O segundo tipo complexo no JSON é o array. Arrays são representados em JSON usando a sua notação  de JavaScript. Por exemplo, este é um array em JavaScript:

var valores = [25, “Olá”, true];

JSON utilizando array.

{
    “valores”: [25, “olá”, true]
}

Consumindo JSONS

Parse JSON

Praticamente todo o JSON que a sua aplicação consumirá virá através de uma requisição XMLHttpRequest, porém, este tipo de resposta de requisição é sempre uma string, se o seu conteúdo contiver um JSON representado, temos converte-lo em um objeto JavaScript. Isso é muito fácil.

var resposta = '{“nome”: “Marcelina Guerra”, “idade”: 34} ';
var pessoa = JSON.parse(resposta);

O retorno é um objeto JavaScript com a estrutura representada. Sendo assim, podemos recuperar os dados como qualquer outro objeto JavaScript.

pessoa.nome;  // retorna “Marcelina Guerra”
pessoa.idade; // retorna 34

Stringify JSON

Em alguns casos, não só para enviar em requisições XMLHttpRequests, temos que representar um objeto JavaScript na forma de uma string, o procedimento para isso é tão simples quanto o seu parse.

var pessoa = {
     nome: “Antonio Carlos”,
     idade: 34
}
var req = JSON.stringify(pessoa);

A variável req recepe a representação em string do objeto ‘{“nome”:”Antonio Carlos”,”idade”:34}’

O stringify tem alguns parâmetros interessantes, o segundo deles permite que você escolha quais chaves serão serializadas, vamos considerar o objeto a seguir:

var pessoa = {
   nome: "Antonio Carlos",
   idade: 34,
   conhecimentos: ["JavaScript", "HTML5", "CSS3"],
   contatos: {
      telefone: "44335566",
      email: "antonio.carlos@gmail.com"    
   }
}
var req = JSON.stringify(pessoa, ["nome", "conhecimentos"]);

O resultado será:

'{"nome":"Antonio Carlos", "conhecimentos": ["JavaScript", "HTML5", "CSS3"]}'

O terceiro parâmetro permite controlar a formatação da string gerada.

JSON.stringify(pessoa, null, 4);

O resultado será:

'{
    "nome": "Antonio Carlos",
    "idade": 34,
    "conhecimentos": [
        "JavaScript",
        "HTML5",
        "CSS3"
    ],
    "contatos": {
        "telefone": "44335566",
        "email": "antonio.carlos@gmail.com"
    }
}'

Sem esse terceiro parâmetro o objeto será sempre serializado sem nenhuma endentação, o é uma opção melhor para transmissão de dados.

Está com duvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário