XML y jQuery

DmD · #1 (**permalink**) 02/05/2012, 07:20

Hola gente!.
Estoy trabada con un tema desde hace ya varios días y lo comparto con ustedes a ver si me pueden dar una mano!.

Les cuento, tengo un xml con algunos campos de recetas (id, titulo, ingredientes, descripcion, foto) y necesito en una pagina listar los datos. Solo puedo usar html, css, javascript, ajax, (es decir, no puedo usar PHP o similar).
Lo que estoy haciendo es usar un codigo como el siguiente.

$(document).ready(function() {
$.get("datos.xml", function(respuestaxml){
$('item',respuestaxml).each(function(i){

var id = $(this).find("id").text();
var texto = $(this).find("texto").text() + " " + $(this).find("texto").attr('title');

$("#datos").html($("#datos").html() + id + " " + texto + "</br>");
});
});

});

El problema que tengo es que el código anterior me tira todos los datos en el div id="datos" pero yo necesito que me haga similar a lo siguiente:

<div class="receta">
<div class="titulo"></div>
<div class="ingredientes"></div>
</div>

O sea que me tire por cada item nuevo un div así y lo que me esta haciendo ahora es en <div class="titulo"> tirarme todos los títulos de todas las recetas.

Alguna idea??.

Gracias de antemano!.
Daniela.

Naahuel · #2 (**permalink**) 02/05/2012, 07:56

Revisá la documentación de $.parseXML:
http://api.jquery.com/jQuery.parseXML/

Supongamos un XML como este:
http://vimeo.com/api/v2/brad/appears_in.xml

Y queremos listar los videos con jQuery. Haríamos así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var XML = ""; //obtener aca el XML
        
        var xmlDoc = $.parseXML( XML );
        var $xml = $( xmlDoc );
        
        //Obtener todos los videos
        var $videos = $xml.find('video');
        
        var $cont = $('#videos');
        //listarlos todos
        $videos.each(function(){
            var $elem = $(this);
            var titulo  = $elem.find('title').text();
            var url = $elem.find('url').text();
            var desc = $elem.find('description').text();
            var thumb = $elem.find('thumbnail_small').text();
            
            $cont.append('<li><h2><a href="'+url+'">'+titulo+'</a></h2><p><img src="'+thumb+'" /></p><p>'+desc+'</p></li>');
        });
        
    });
</script>
 
 
<title>XML Test</title>
</head>
<body>
    <ul id="videos">
        
    </ul>
</body>
</html>

Acá lo podés ver funcionando:
http://jsbin.com/ixulub

Te recomiendo que uses $.ajax en lugar de $.get, de forma que puedas especificar que el tipo de datos que esperas es XML.

Saludos.

DmD · #3 (**permalink**) 02/05/2012, 08:45

Naahuel, muchas gracias por la respuesta, es justo lo que necesito.

Te cuento que estuve intentando armarlo pero algo me falla.
Arme el xml, lo puse igual que el que me pasaste por las dudas. Lo subi a:[URL="http://test.legioncreativa.com.ar/pruebas_xml/videos.xml"]http://test.legioncreativa.com.ar/pruebas_xml/videos.xml[/URL] y el html a [URL="http://test.legioncreativa.com.ar/pruebas_xml/index.html"]http://test.legioncreativa.com.ar/pruebas_xml/index.html[/URL] pero algo no funciona.
El firebug me dice que tengo un error de sintaxys en videos.xml.

Tenes idea que puede estar pasando?.
Disculpa las molestias y gracias de nuevo!.

Dafonz · #4 (**permalink**) 02/05/2012, 08:49

Porque con poner
XML = "videos.xml", no significa que te va a abrir el archivo y lo va a leer.. puedes utilizar ajax para leerlo

Naahuel · #5 (**permalink**) 02/05/2012, 09:06

Y claro :P

tu error está acá:

Código Javascript:

Ver originalvar XML = "videos.xml"; //obtener aca el XML

Proporcionate un url, no un código, jeje.

Probá esto:

Código Javascript:

Ver original$(function(){
    //obtener el XML
    var $pedido = $.ajax({
        url : 'videos.xml',
        contentType : 'xml'
    });
 
    //cuando finalice el pedido
    $pedido.done(function(resultadoXML){
        //No es necesario parseXML si se usa contentType xml en $.ajax
        //var xmlDoc = $.parseXML( resultadoXML );
        var $xml = $( resultadoXML );
        
        //Obtener todos los videos
        var $videos = $xml.find('video');
        
        var $cont = $('#videos');
        //listarlos todos
        $videos.each(function(){
            var $elem = $(this);
            var titulo  = $elem.find('title').text();
            var url = $elem.find('url').text();
            var desc = $elem.find('description').text();
            var thumb = $elem.find('thumbnail_small').text();
            
            $cont.append('<li><h2><a href="'+url+'">'+titulo+'</a></h2><p><img src="'+thumb+'" /></p><p>'+desc+'</p></li>');
        });
        
    });
});

DmD · #6 (**permalink**) 02/05/2012, 09:15

Gracias!!! ya funciona perfecto.

Antes de leer tu respuesta estaba probando con $.ajax pero no me funcionaba, se ve que estaba escribiendo mal la sintaxis, todavia no entiendo mucho de ajax.

Muchas gracias por todo!!!