BRN Souza

Objetivo: Entender como parametrizar funções JS usando JSON.

Pré-requisitos:

• Javascript (básico) » Funções
• JSON (básico) » O que é JSON?

Antes de conhecer o JSON, quando eu precisava ler o código javascript (para uma manutenção por exemplo) e me deparava com uma função JS que recebia muitos parâmetros, a identificação do que cada parâmetro representava era difícil, eu tinha que deduzir pelo valor de cada parâmetro passado, o que exatamente ele referenciava dentro da minha função ou então abrir o arquivo onde a função estava e ler o nome dos parâmetros recebidos na declaração dela.
Ex.:

addCarro('porsche', '911 Turbo', 480, 310, '3,5', 'prata', 2009, 2009, true);

O que é “480″? E o “310″? Será que “2009″ é o ano de fabricação do carro?

Usando JSON para parametrizar nossas funções, nós conseguimos fazê-la mais legível quando de sua chamada. Para o exemplo acima, teríamos algo parecido com isso:

addCarro(
    {
        montadora     : 'porsche',
        modelo        : '911 Turbo',
        cavalos       : 480,
        velocidadeMax : 310,
        DeZeroaCem    : '3,5',
        cor           : 'prata',
        anoFabricacao : 2009,
        anoModelo     : 2009,
        possuiFoto    : true
    }
)

Muito melhor de ler e usar, né? Os benefícios de se utilizar essa forma ficam ainda mais evidentes quando precisamos passar para nossas funções estruturas mais complexas de dados por exemplo arrays ou ainda outros JSON’s. Vejamos o exemplo:

addCarro(
    {
        montadora     : 'porsche',
        modelo        : '911 Turbo',
        cavalos       : 480,
        velocidadeMax : 310,
        DeZeroaCem    : '3,5',
        cor           : 'prata',
        anoFabricacao : 2009,
        anoModelo     : 2009,,
        fotos         : [
            {arquivo:'imgs/9876/01.jpg', legenda:'Pintura impecável'},
            {arquivo:'imgs/9876/02.jpg', legenda:'Interior todo em couro'},
            {arquivo:'imgs/9876/03.jpg', legenda:'Rodas de liga leve 20"'},
            {arquivo:'imgs/9876/04.jpg', legenda:'Visão lateral'}
        ]
    }
)

Aqui nós não dizemos simplesmente se tem ou não foto, mas sim quais são as fotos e para cada foto temos a informação do nome do arquivo e também da legenda (para exibirmos na página por exemplo).

Agora, como fica a declaração da função e como ler JSON passado como parâmetro:

function addCarro(jsonOptions){
    //Lendo o JSON passado como parâmetro
    jsonOptions.montadora;       // 'porsche'
    jsonOptions.modelo;          // '911 Turbo'
    jsonOptions.cavalos;         // 480
    jsonOptions.velocidadeMax;   // 310
    jsonOptions.DeZeroaCem;      // '3,5'
    jsonOptions.cor;             // 'prata'
    jsonOptions.anoFabricacao;   // 2009
    jsonOptions.anoModelo;       // 2009
    jsonOptions.fotos;           // [Objeto Array]
    jsonOptions.fotos[0];        // [Objeto JSON]
    jsonOptions.fotos[0].arquivo;// 'imgs/9876/01.jpg'
    jsonOptions.fotos[3].legenda;// 'Visão lateral'
 
    //Iterando sobre as fotos
    for(var i=0, j=jsonOptions.fotos.length; i<j; i++){
      jsonOptions.fotos[i].arquivo; //lê o arquivo
      jsonOptions.fotos[i].legenda; //lê a legenda
   }
}

Se você tiver alguma dúvida referente a manipulação do JSON leia este post onde eu detalho como trabalhar com ele.

Qualquer dúvida, é só falar.

Objetivo: Entender o funcionamento do JSON aprendendo como usá-lo para estruturar informações e iterar sobre elas

Pré-requisitos:

• Javascript básico (Array, For, For … in)

JSON (sigla para JavaScript Object Notation) é um padrão para escrever estruturas de dados em JavaScript.

O JSON é nativo do Javascript e apesar de recentemente ter ganhado muita evidência já esta disponível na linguagem há bastante tempo.

Acredito que o JSON ganhou muito destaque nos últimos tempos por conta do crescimento do Javascript como linguagem de programação, por oferecer uma maneira bastante “confortável” de se trabalhar com coleções de dados diversas.

Resumidamente o JSON se baseia na notação ATRIBUTO : VALOR, onde ATRIBUTO pode ser o nome que você quiser para identificar alguma coisa e VALOR o próprio valor desta coisa
Exemplos:

//ATRIBUTO » "nome" | VALOR » "Bruno Souza"
{"nome":"Bruno Souza"}
 
//ATRIBUTO » "font-size" | VALOR » "20px;"
{"font-size":"20px;"}

Ele tem uma estrutura parecida com o XML, logo se você conhece XML não terá dificuldades para entender seu funcionamento (mesmo não conhecendo XML, o entendimento do JSON é bem tranquilo, então se esse é o seu caso, não se assuste).

Observe o esquema:

• Filme
  • Título: X-Men Origens: Wolverine
  • Gênero: Aventura
  • Duração (min): 107
  • Ano: 2009

Para representarmos essa estrutura usando JSON, teríamos o seguinte código:

var filme = {
    "titulo"  : "X-Men Origens: Wolverine",
    "genero"  : "Aventura",
    "duracao" : "107",
    "ano"     : "2009"
}

Em XML teríamos

<?xml version='1.0' encoding='utf-8'?>
<filme>
	<titulo>X-Men Origens: Wolverine</titulo>
	<genero>Aventura</genero>
	<duracao>107</duracao>
	<ano>2009</ano>
</filme>

Podemos incrementar nossa estrutura de forma que haja mais de um filme e que para cada filme exista um item chamado “Elenco” e neste coloquemos a lista dos principais atores do filme.

• Filme
  • Título: X-Men Origens: Wolverine
  • Gênero: Aventura
  • Duração (min): 107
  • Ano: 2009
  • Elenco:
    • Hugh Jackman (Logan / Wolverine)
    • Ryan Reynolds (Wade Wilson / Deadpool)
    • Liev Schreiber (Victor Creed / Dentes-de-sabre)
    • Dominic Monaghan (Bradley)
• Filme
  • Título: Velozes & Furiosos 4
  • Gênero: Ação
  • Duração (min): 107
  • Ano: 2009
  • Elenco:
    • Vin Diesel (Dominic “Dom” Toretto)
    • Paul Walker (Brian O’Conner)
    • Jordana Brewster (Mia Toretto)
    • Michelle Rodriguez (Letty)

Para esta nova estrutura fazemos um array de objetos JSON para os filmes (um para cada) e nos itens “elenco” um outro array simples de strings (nomes dos atores)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var filmes = [
    {
        "titulo"  : "X-Men Origens: Wolverine",
        "genero"  : "Aventura",
        "duracao" : "107",
        "ano"     : "2009",
        "elenco"  : [
            "Hugh Jackman (Logan / Wolverine)",
            "Ryan Reynolds (Wade Wilson / Deadpool)",
            "Liev Schreiber (Victor Creed / Dentes-de-sabre)",
            "Dominic Monaghan (Bradley)"
        ]
    },
    {
        "titulo"  : "Velozes & Furiosos 4",
        "genero"  : "Ação",
        "duracao" : "107",
        "ano"     : "2009",
        "elenco"  : [
            "Vin Diesel (Dominic \"Dom\" Toretto)",
            "Paul Walker (Brian O'Conner)",
            "Jordana Brewster (Mia Toretto)",
            "Michelle Rodriguez (Letty)"
        ]
    }
]

Vamos analisar a estrutura acima:

Linha 1 - "Abro" o array que conterá os JSON's de cada filme utilizando "["
Linha 2 - "Abro" o JSON do primeiro filme
Linha 3 - Crio o primeiro atributo do meu objeto JSON - "titulo"
          Observe que para atribuir um valor a um item usa-se ":"
          Este atributo poderá ser acessado literalmente pelo seu nome
          Ex.: filmes[0].titulo
          Apesar do atributo "titulo" ter sido declarado com o uso de
          aspas nós consiguimos acessa-lo diretamente sem elas.
          Isso ocorre porque internamente é como se o item se tornasse
          uma variável (ou uma propriedade no conceito OO) do objeto
          JSON que representa o filme alocado no índice ZERO do array
          filmes
Linhas 4 a 6 - Repito o mesmo procedimento da linha 3.
          Observe que utilizamos a "," para separar os atributos do
          objeto JSON
Linha 7 - Crio o atributo "elenco" e a ele eu atribuo um array contendo
          os atores do filme
Linha 13 - "Fecho" o JSON
Linhas 14 a 25 - Repito a mesma coisa para o próximo objeto JSON.
Linha 26 - "Fecho" o array de objetos JSON

Vamos ver agora como ler alguns dos dados da nossa estrutura:

filmes;              //retorna um array contendo dois objetos JSON
filmes[0];           //retorna um objeto JSON
filmes[0].título;    //retorna "X-Men Origens: Wolverine"
filmes[1].elenco[2]; //retorna "Jordana Brewster (Mia Toretto)"

Para iterar em cada um dos filmes do array utilizamos um loop simples

1
2
3
4
5
6
7
8
9
10

for (i=0; i<filmes.length; i++) {
    filme = filmes[i];
    infosFilme = '';
    for(j in filme){
        atributo = j;
        valor = filme[j];
        infosFilme += atributo+':\t'+valor+'\n';
    }
    alert(infosFilme);
}

Analisando a estrutura acima:

Linha 1 - Fazendo o for para tratar cada um dos filmes
          Como "filmes" é um array, a propriedade "length" me diz
          quantos são os filmes contidos no array
Linha 2 - Atribuo a variável "filme" o filme do índice apontado pelo for
Linha 3 - Limpo a variável "infosFilmes" atribuindo a ela uma string vazia
Linha 4 - Itero em cada um dos atributos do filme, lembrando que os
          atributos são: titulo, gênero, duração, ano e elenco
Linha 5 - Pego o nome do atributo j
Linha 6 - Pego o valor do atributo j
Linha 7 - Monto a string "ATRIBUTO: VALOR"

A jQuery usa muito JSON para parametrizar suas funções. Neste link eu mostro como parametrizarmos nossas próprias funções JS usando JSON.

Para mais detalhes a cerca do JSON visite http://www.json.org

Qualquer dúvida, é só falar.