Trocando dados utilizando JSON

13/05/2010

Rodrigo Aramburu

JSON é um formato leve de troca de informações que em muitos casos está sendo utilizado para substituir o XML ou mesmo utilizado em conjundo.

É um formato de dados fácil de escrever e ler por seres humanos e é bastante fácil de ser interpretado por computadores, sendo possível converte-lo facilmente para a notação de objetos JavaScript, o que o torna um boa opção para AJAX, principalmente quando necessitamos processar de alguma forma os dados buscados via AJAX.

Vejamos um exemplo do formato JSON:

{
"nome": "Rodrigo",
"sobrenome": "Aramburu",
"idade":"25",
"site":"http://www.botecodigital.info"
}

O formato é bem simples, um objeto é formado de vários membros dentro de chaves. Um membro é formado de uma string que será o nome da variável e um valor que pode ser: string, numérico, lógico, um array ou um outro objeto.

Vejamos um exemplo um pouco mais complexo:

{
    "nome":"Loja Exemplo",
    "produtos":[
                {"nome":"Monitor LCD","preco":350},
                {"nome":"Gravador de DVD","preco":120},
                {"nome":"Pendrive","preco":60},
               ]
}

Neste objeto temos 2 membros: nome que é tem um valor string e produtos que é um array de outros objetos que possuem dois membros: nome e preco.

Podemos interpretar o formato JSON utilizando uma função da biblioteca JQuery – jQuery.parseJSON – ela recebe o documento JSON como parâmetro e devolve um objeto JavaScript com os valores.

Exemplo:

var dados = '{"nome": "Rodrigo","sobrenome": "Aramburu","idade":"25","site":"http://www.botecodigital.info"}';
var obj = jQuery.parseJSON(dados);

alert(obj.nome);
alert(obj.sobrenome);
alert(obj.idade);
alert(obj.site);

Bastante simples! Deve ser mostrado em janela de alert as palavras “Rodrigo”, “Aramburu”, “25″ e “http://www.botecodigital.info”. Como podemos notar isto torna muito fácil manipular uma série de valores contidos dentro de uma string ou arquivo arquivo.

Mais um exemplo para reforçar:

var dados  = '{ ';
    dados += '"nome":"Loja Exemplo",';
    dados += ' "produtos":[';
    dados += '       {"nome":"Monitor LCD","preco":350},';
    dados += '       {"nome":"Gravador de DVD","preco":120},';
    dados += '       {"nome":"Pendrive","preco":60}';
    dados += '    ]';
    dados += '}';
var obj = jQuery.parseJSON(dados);

alert( obj.nome);
alert( obj.produtos[0].nome );
alert( obj.produtos[0].preco );
alert( obj.produtos[1].nome );
alert( obj.produtos[1].preco );

Agora vamos ver a real vantagem de utilizar JSON que é utilizá-lo para fazer AJAX e para isso a biblioteca JQuery nos fornece uma função chamada $.getJSON.

Exemplo:

        $(document).ready(function(){
              $.getJSON('dados.json', function(data) {
                   $('#nome').html( data.nome);
                   $('#sobrenome').html( data.sobrenome );
                   $('#idade').html( data.idade );
                   $('#site').html( data.site );
             });
    });

A função $.getJSON recebe como parâmetros um nome de arquivo com dados no formato JSON, após o arquivo ser carregado ele é convertido em um objeto e passado por parâmetro(data) para a função que é responsável por manipular os valores.

Veja o exemplo de uso de JSON