Considero ler um arquivo jSON mais fácil do que fazer a
leitura de um XML, mais objetivo ainda quando se está usando um bom Framework, como
o jQuery. Para facilitar bem o entendimento, criei um arquivo .”json”,
poderia ser qualquer extensão contato que esteja nos padrões jSON. Como sabem, o
jSON, pode ser gerando dinamicamente, como um arquivo XML, então vamos ao
exemplo:

// Estrutra JSON.

{

'usuarios':

[

{'id': 12, 'nome': 'Ted', 'telefone': '(99) 9999-9999', 'cidade': 'Salvador'},

{'id': 13, 'nome': 'Clark', 'telefone': '(88) 8888-8888', 'cidade': 'Madrid'},

{'id': 14, 'nome': 'Nuno', 'telefone': '(77) 7777-7777', 'cidade': 'Nova York'},

{'id': 15, 'nome': 'Maia', 'telefone': '(66) 6666-6666', 'cidade': 'Contagem'}

]

} 

Estrutura criada com o ID do usuário, NOME, TELEFONE e
CIDADE, vamos agora organizar o jQuery para ler e mostrar o resultado dentro de
uma DIV qualquer.

Para deixar o meu script mais acessível externamente
utilizei o conceito de criação de objetos em JavaScript.

Criei uma classe chamada json e dentro dela o objeto resgatarValores.

No jQuery existe um método chamado $.getJSON() que facilita
o acesso via GET e retorna os valores em array.

$.getJSON('arquivo.json', function(data){

jogamos o retorno aqui

}

Criamos um laço de repetição para listar os valores que
existe na variavel de retorno atribuída “data”

for (i = 0; i < this.qtd; i++){

this.retorno += ‘ID: ‘ + data.usuarios[i].id + ‘
‘;

this.retorno += ‘Nome: ‘ + data.usuarios[i].nome + ‘ – ‘;

this.retorno += ‘Cidade: ‘ + data.usuarios[i].cidade + ‘

‘;

}

O código completo fica assim:

 // Classe para chamar o Json.

function json(){

var qtd;

var retorno;

// Resgatar valores.

json.prototype.resgatarValores = function(){

$(‘#resultado’).html(‘Carregando dados…’);

// Estrutura de resultado.

$.getJSON(‘arquivo.json’, function(data){

this.qtd = data.usuarios.length;

this.retorno = ”;

for (i = 0; i < this.qtd; i++){

this.retorno += ‘ID: ‘ + data.usuarios[i].id + ‘
‘;

this.retorno += ‘Nome: ‘ + data.usuarios[i].nome + ‘ – ‘;

this.retorno += ‘Cidade: ‘ + data.usuarios[i].cidade + ‘

‘;

}

$(‘#resultado’).html(this.retorno);

});

}

}

// Objeto.

var obj = new json();

obj.resgatarValores();

O retorno será imprimido na DIV “resultado”

Baixe os arquivos aqui:

Download do Arquivo

Abraços a todos.