Interpretando arquivos XML com jQuery
August 5, 2010A alguns dias atrás estive a procura de soluções simples e práticas para se ler as informações de um arquivo xml a partir do jQuery. Sabendo da dificuldade de se achar conteúdos relevantes em nossa lingua nativa para os que não entendem lhufas de inglês, resolvi escrever esse artigo em prol de facilitar o entendimento de todos, então chega de conversa e vamos ao que interessa.
Para início de conversa, nada do que eu escrever abaixo irá funcionar se você, caro usuário, não importar a biblioteca do jQuery em seu código e a melhor maneira para se fazer é pela API do Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Feito o passo acima, vamos agora para o xml.
Iremos criar um xml bem simples para que possamos entender o seu funcionamento. Se você não esta familiarizado com xml, veja um artigo sobre as regras de syntax de um xml.
<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
<site>
<nome>Site do fulano</nome>
<url>http://sitedofulano.com.br</url>
</site>
<site>
<nome>Site do ciclano</nome>
<url>http://sitedociclano.com.br</url>
</site>
</sites>Agora que já importamos a biblioteca do jQuery em nossa página e temos conhecimento do xml gerado, podemos iniciar as instruções em jQuery.
Primeiro passo é iniciar o jQuery
$(function() {
});A partir de agora é onde tudo faz sentido, iniciaremos a requisição ajax do jQuery para ler o arquivo xml. A requisição em ajax possui 4 parâmetro: type, url, dataType e success, sendo o mais importante deles o parâmetro success onde iremos ‘setar’ uma função para receber os dados do xml.
$.ajax({
type: 'GET',
url: 'sites.xml',
dataType: 'xml',
success: function(xml) {
}
});A diversão começa aqui! Agora que já estamos acessando o arquivo xml, é preciso encontrar os dados gravados nele e fazer alguma coisa. Começamos pela leitura dos dados retornados e usando o método find para obter todos os nós que correspondem ao texto que fornecemos (neste caso, ‘site’), e depois usar a função de loop para localizar os nós.
$(xml).find('site').each(function() {
});Tudo o que resta é fazer com que os dados a partir desse seja impresso na página, para isso utilizaremos a função find para encontrar e obter o texto dos nós. Para o exemplo, irei simplificar retornando apenas os dados do usuário e do conteúdo do twit.
var nome = $(xml).find('nome').text();
var url = $(xml).find('url').text();
$('<p></p>').html(nome+'<br />'+url).appendTo('#wrap');Pronto! Nosso código final, completo, deve ser algo como o abaixo:
$(function() {
$.ajax({
type: 'GET',
url: 'sites.xml',
dataType: 'xml',
success: function(xml) {
$(xml).find('site').each(function() {
var nome = $(xml).find('nome').text();
var url = $(xml).find('url').text();
$('<p></p>').html(nome+'<br />'+url).appendTo('#wrap');
});
}
});
});Você pode ver o exemplo funcionando ou fazer o download do código fonte.
tags: Ajax, jQuery, XML
Gustavo Boa Noite!
Por gentileza, como poderia saber se retornou alguma coisa no xml, tipo:
success: function(xml) {
if(xml.temalgumacoisa) {
processa_xml;
} else {
alert(‘Sem dados’);
}
}
Olá Luciano,
Você pode verificar se existe algo no xml antes de imprimir os dados.
if ($(xml).find('site').length > 0) {processa_xml
} else {
alert('Sem dados');
}
Gustavo,
Como podemos fazer ao escrever o resultado que venha na ordem correta.
Exemplo:
Site do fulano
http://www……….
Site do ciclano
http://www……...
Obrigado!
Consegui achar a resposta seria trocar a seguinte linha:
var nome = $(xml).find(‘nome’).text();
var url = $(xml).find(‘url’).text();
Por esta:
var nome = $(this).find(‘nome’).text();
var url = $(this).find(‘url’).text();
Vlw!
Olá Renan,
Não cheguei a tempo para poder responder sua dúvida mas, obrigado por compartilhar a solucão encontrada.
Dei uma olhada aqui e acho que nem vou precisar do array, porem, quando eu coloco para escrever os valores dentro da DIV a função coloca todos nomes depois todas as urls, não separa por nó.
Quando eu coloco $(this).find(‘lat’).text(); ele só volta um nó. Tentei fazer um for mas não deu certo.
Seguinte, essa função coloca todos os resultados em uma variável? Todos os valores nome do XML na variável nome?
Precisava desses valores separados, num array. Tem como?
não! a cada passada pelo .each(), ele atribui um nome a variável, mas você pode criar um array antes do .each() e, a cada passada, ele acrescentas os valores no seu array, tipo:
success: function(xml) {
var myArray = new Array();
var count = 0;
$(xml).find(‘site’).each(function() {
myArray[count] = $(xml).find(‘nome’).text();
count++;
}
}
Gustavo, bom dia!
Muito bom sua post, mas estou com uma duvida.
Preciso ler os dados do XML mas retornar ele separando as informações…
Exemplo, utilizando o seu XML eu precisava de tipo usar o nome da pessoa para completar o titulo da pagina:
NOME
Como eu poderia fazer isso usando o seu código?
Para mim não tem problema porque o meu XML só retorna dados de um só usuario.
Gustavo, bom dia!
Muito bom sua post, mas estou com uma duvida.
Preciso ler os dados do XML mas retornar ele separando as informações…
Exemplo, utilizando o seu XML eu precisava de tipo usar o nome da pessoa para completar o titulo da pagina:
NOME
E a URL vamos supor para completar um link:
Como eu poderia fazer isso usando o seu código?
Para mim não tem problema porque o meu XML só retorna dados de um só usuário.
Abraços!
Olá André!
Você pode utilizar o jQuery para preencher o title da página após a requisição dos dados, ex: $(“title”).text(nome);
abs
Gustavo como faço para joga isso em uma combo ???
Vlw
Alan,
Basta você fazer o append dos dados dentro do select.
$(‘<option></option>’).html(nome).appendTo(‘#meu_select’);