Ayuda para obtener info de XML mediante JS

[de-troit]

Hola foreros, actualmente estoy haciendo un plug-in para jQuery donde necesito tener cierta información relacionada a videos de youTube.

Afortunadamente pude averiguar que la información de los videos se encuentra en la url: http://gdata.youtube.com/feeds/videos/ + idVideo

La verdad es que aún no me introduzco al mundo de AJAX (JS + XML), no tengo ningún conocimiento de esto, ya que solo manejo HTML + JS, pero no XML, es por eso que recurro a ustedes a ver si me pueden ayudar, estuve buscando en internet pero salen cosas de las que no entiendo nada y termino confundido.

Mi pregunta es: Cómo puedo leer un archivo XML? Por ejemplo este:
http://gdata.youtube.com/feeds/videos/VurhzANQ_B0, y acceder a los valores de sus etiquetas?

Hay mucha información dentro de ese XML, pero sólo necesito saber el título del video y la descripción.

Si no me equivoco la etiqueta <title> contiene el título del video y <media:description type='plain'> la descripción.

Cómo puedo hacerlo?

Ojalá me puedan ayudar y me expliquen un poquito, porque como dije, no sé nada de esto.

Muchas gracias foreros y saludos!

[TragedyCL]

Un ejemplo sencillo para leer un XML es el siguiente:

Teniendo el siguiente XML llamado "xml.xml":

Código XML:

<?xml version="1.0" encoding="iso-8859-2"?>
<usuarios>
    <registro>
        <rut>1</rut>
        <dv>1</dv>
        <nombres>Pepito</nombres>
        <apellido_paterno>Trepa</apellido_paterno>
        <apellido_materno>Por Chile</apellido_materno>
        <cargo>Programador</cargo>
    </registro>
    
    <registro>
        <rut>2</rut>
        <dv>2</dv>
        <nombres>Juan</nombres>
        <apellido_paterno>Tuvo</apellido_paterno>
        <apellido_materno>Un tubo</apellido_materno>
        <cargo>Terrible de jefe</cargo>
    </registro>
</usuarios>
 

Código PHP:

// Cargo la ruta en $archivo
$archivo = "xml.xml";
 
// Cargo el archivo en $archivo_xml
$archivo_xml = simplexml_load_file($archivo);  
 
// Si el archivo existe
if($archivo_xml)
{
        // Lo recorro completamente
    foreach ($archivo_xml->registro as $registro)
    {
                // Despligo los "nombres" del XML ($registro)
        echo "Nombres: ".$registro->nombres;
        echo "<br>";
                // Despligo los "apellido_paterno" del XML ($registro)
        echo "Apellido Paterno: ".$registro->apellido_paterno;
        echo "<br>";
                // Despligo los "apellido_materno" del XML ($registro)
        echo "Apellido Paterno: ".$registro->apellido_materno;
        echo "<hr>";
    } 
// Si no existe o el XML esta corrupto
} else echo "WTF?";
 

[de-troit]

TragedyCL muchas gracias por el ejemplo, me sirve bastante para aprender a manejar XML con PHP, pero lo que busco ahora es leer un XML con JavaScript, no con PHP, muchas gracias, igual es de utilidad, pero como dije, por ahora es estrictamente necesario que lo haga con JavaScript.

Saludos!

[de-troit]

Mejor si me ayudan haciéndolo con jQuery, se me había olvidado la existencia de la función ajax, estoy averiguando al respecto. Saludos!

[de-troit]

Conseguí leer un archivo xml con la función $.ajax, pero tengo 2 problemas:

1: Cómo puedo leer una etiqueta con namespace? Ej.> <media:description>Valor</media:description>?

2. Sólo puedo leer archivos XML localmente (excepto en explorer), si es un archivo está en un servidor remoto no funciona :S

Les dejo mi parte de código:

Código Javascript:

$.ajax({
    type: 'GET',
    url: 'pruebaXML.xml',
    dataType: $.browser.msie? 'text' : 'xml',
    success: function(XMLdata) {
        if(typeof XMLdata == 'string') {
            var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = false;
            xmlDoc.loadXML(XMLdata);
        }
                                
        else var xmlDoc = XMLdata;
                                
        vInfo[i] = $(xmlDoc).find('title').text();
        if(opts.description) vInfo[i,1] = $(xmlDoc).find('media:description').text();
        //En la linea de arriba el parametro 'media:description' que se le pasa
        //al metodo find no funciona.
    }
});
 

Por mientras seguiré buscando en la web como resolverlo, espero su ayuda, saludos!

[dual3nigma]

En efecto, ningún otro navegador te va a dejar acceder a documentos alojados en otro dominio, es necesario que hagas un proxy, en php por ejemplo, que lea el archivo y yo te recomendaría que lo proceses también del lado del servidor y mandes la respuesta a js en json.

[de-troit]

Solucioné el problema número 1, sólo bastaba con poner como parámetro a find 'media\\:description'. Era necesario poner los '\\'

Ahora con respecto al problema número 2, según lo que me dices dual3nigma, estás seguro que sólo con explorer se puede leer archivos xml remotamente? en los otros navegadores no se puede? por qué?

Lo que pasa es que estoy haciendo un plugin para jQuery, y la idea era usar sólo JavaScript :(

No conozco el concepto de proxy, me podrías explicar la idea?
Saludos!

[dual3nigma]

Asi es, puedes investigar sobre "cross domain policy". Un proxy seria lo que te comentaba de que hicieras las solicitudes a un archivo en tu servidor (php por ejemplo) que cargarara los contenidos de la página y te los enviara ya que obvio del lado del servidor no existen estas restricciones. Pero pues como el punto es que sea puro js, quizas podrias buscar un plugin para jquery que lo haga, se que eso se puede hacer con YQL, pero no se si para jQuery halla algo parecido. En todo caso busca "ajax cross domain jquery" o algo asi.

[dual3nigma]

Mira, hice un ejemplo muy sencillo utilizando yql y jquery que muestra title y description del feed, pruebalo y me dices si te sirvio:

Código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cross Domain Ajax</title>
<script src="jquery.min.js"></script>
<script>
// La url del feed del video
var url = 'http://gdata.youtube.com/feeds/videos/VurhzANQ_B0';
// La consulta a YQL
var yql = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent('select * from xml where url="' + url + '"')+'&format=xml&callback=?';  
 
$.getJSON(yql, function (datos) {
    var _xml = $(datos.results[0]);
        
    $('#datos').html('<p><strong>'+_xml.find('title').text()+'</strong><br />'+_xml.find('media\\:description').text()+'</p>');
});
</script>
</head>
<body>
<div id="datos">
</div>
</body>
</html>
 

Saludos!

[de-troit]

dual3nigma, muchas gracias por tus respuestas. Justamente ayer en la noche me quedé hasta muy tarde averiguando sobre JSONp y cosas por el estilo buscando info sobre el cross-domain, la verdad es que hice un par de intentos con el método getJSON y no me funcionó, tenía sueño y probablemente hice algo mal, probaré tu ejemplo y te cuento.

Muchas gracias por la ayuda, te agredezco mucho, estamos en contacto :)

[de-troit]

Lo probé y no me funcionó, pongo una alerta con el supuesto valor retornado pero sale 'undefined' =/

Dejo el código que puse:

Código Javascript:

//La lista 'list' ya tiene datos, contiene las ids de los videos, pero por ahora pruebo sólo con 1 url (la var url)
for(var i in list) {
    var url = 'http://gdata.youtube.com/feeds/videos/VurhzANQ_B0';
    var YQL = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + '&format=xml&callback=?';
 
    $.getJSON(YQL, function(XMLData) {
        vInfo[i] = $(XMLData.results[0]).find('title').text();
        if(opts.description) vInfo[i,1] = $(XMLData.results[0]).find('media\\:description').text();
    });
 
    alert(vInfo[i]);
}
 

Tu lo probaste? Si es así, te funcionó?
Seguiré averiguando.
Saludos y gracias!

[dual3nigma]

Obvio que lo probe ¬¬ y obvio que me funciono, si no no lo hubiera posteado. Copiaste el codigo tal cual? tienes el jquery.min.js en esa carpeta? Mira te dejo una captura para que veas que funciona perfectamente.

[dual3nigma]

Quizas puedas poner tu codigo completo, por que asi a simple vista se ve muy extraño :S Tendria que ver donde declaras la variable vInfo y como, esto esta mal vInfo[i,1]

[de-troit]

Disculpa si te molestó el que preguntara si lo probaste, es sólo que me pareció raro que no me funcionara.Ahora he estado imprimiendo unos materiales, pero buscaré el error en seguida. Las buenas noticias es que funciona, debe ser un problema mío, descubiendo eso estoy OK.

Te dejo la función completa que está dentro de un objeto usando JSON:

Código Javascript:

getXMLinfo: function(list) {
    var path = 'http://gdata.youtube.com/feeds/videos/';
    var format = ie? 'text' : 'xml', vInfo = [];
                    
    for(var i in list) {
        var url = path + list[i];
        var YQL = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + '&format=xml&callback=?';
 
        $.getJSON(YQL, function(XMLData) {
            vInfo[i] = $(XMLData.results[0]).find('title').text();
            if(opts.description) vInfo[i,1] = $(XMLData.results[0]).find('media\\:description').text();
        });
 
        alert(vInfo[i]);
    }
}
 
//Otra función me devuelve la lista, pero supongamos que la paso literalmente como parámetro:
//Porsi el caso, he comprobado que los id's en la lista se retornan correctamente.
var videosInfo = getXMLinfo([
    'VurhzANQ_B0',
    'ZXTC0SmgE2s',
    'jUkoL9RE72o',
    'Fi_GN1pHCVc',
    'oJaBHSIRVlE',
    '94bGzWyHbu0'
]);
 

Muchas gracias por todo, te estoy comunicando :)

[dual3nigma]

Pues mira, hay varios detalles que no estas considerando en tu código, por ejemplo la funcion "$.getJSON" es, como sabras, ajax (asincrona) osea que la funcion anonima que le pasas como parametro se ejecuta una vez que se recibe respuesta del servidor, por eso es que el alert te da undefined, segundo aun asi no estas declarando "vInfo" lo cual es otro error. Otra cosa es que en la parte donde tienes "vInfo[i,1]" cual es tu objetivo? osea entiendo que si tienes la opcion de mostrar descripcion la agregas pero a que? y por ultimo cual es el punto de "videosInfo"? si se supone que tendra la "informacion de los videos(titulo, descrpcion)" pues en ninguna parte de tu funcion getXMLinfo estas devolviendo ningun valor.

Bueno espero haberme explicado mas o menos bien, y que mis comentarios te sean de ayuda.

Saludos!

[dual3nigma]

Mira hice un ejemplo rapido de lo que yo entiendo que quieres hacer, revisalo y me dices si te sirvio de algo, siquieres primero pruebalo tal cual para que veas su funcionamiento, le puse muchos comentarios

Código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cross Domain Ajax</title>
<script src="jquery.min.js"></script>
<script>
/**
 * Con esta funcion cargas el feed de los videos
 * y una vez que se han cargado todos llamas a la funcion "callback"
 *
 * @param {Array} list - Un arreglo con los id's de los videos
 * @param {Function} callback - La funcion que se llama cuando todos los datos de los videos se han cargado
 */
function getXMLinfo(list, callback) {
    var path = 'http://gdata.youtube.com/feeds/videos/',
        videosInfo = [], // El array que contiene los datos de los videos
        url, YQL, 
        cuantos = 0, total = list.length; // cuantos van cargados y cuantos son en total
    
    // por cada id de video
    for(var i in list) {
        url = path + list[i];
        YQL = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + '&format=xml&callback=?';
        
        // Comenzar la carga del feed
        $.getJSON(YQL, function (XMLData) {
            // Otro consejo cuando use jquery trata de evitar repetir por todos lados
            // $(XMLData.results[0]) y despues al rato $(XMLData.results[0]) otra vez
            // mejor ponlo en una variable ok?
            var feed = $(XMLData.results[0]);
            
            // Aqui vas poniendo todo en el array
            videosInfo.push({titulo: feed.find('title').text(), 
                    descripcion: feed.find('media\\:description').text()});
            
            cuantos++;
            
            // Si ya se cargaron todos entonces llamas a la funcion que pusiste como callback
            if(cuantos == total) callback.call(null, videosInfo);
        });
    }
}
 
// Pasas los ids, y la funcion que se llamara cuando todo el contenido se cargue
getXMLinfo([
    'VurhzANQ_B0',
    'ZXTC0SmgE2s',
    'jUkoL9RE72o',
    'Fi_GN1pHCVc',
    'oJaBHSIRVlE',
    '94bGzWyHbu0'
], function (info) { // Info es el array que getXMLinfo se llamaba videosInfo
    var datos = $('#datos');
    
    // como ejemplo los meto en div#datos
    for(var i in info) {
        datos.append('<p><strong>'+info[i].titulo+'</strong><br />&nbsp;&nbsp;&nbsp;&nbsp;'+info[i].descripcion+'</p>');    
    }
});
</script>
</head>
<body>
<div id="datos">
</div>
</body>
</html>
 

Ah y te dejo una captura ¬¬ (para que luego no digas que no funciona) jajaja ntc

Saludos!

[de-troit]

Bueno, pues si he declarado la variable vInfo literalmente, en la línea donde tengo esto:

Código Javascript:

var format = ie? 'text' : 'xml', vInfo = [];
//Que es lo mismo que:
var format = ie? 'text' : 'xml'; var vInfo = [];
 

Se me olvido poner el return, siempre lo hago al final, lo que pasa es que la función getXMLinfo aún está en construcción, no está terminado, pero al final, debería retornar una matriz con los valores obtenidos (título del video y descripción del video).

[de-troit]

Te me adelantaste hahaha, a ver, revisaré lo que pusiste y te comento, muchas gracias por ayudarme tanto :D, como dije, soy nuevo en AJAX y no me manejo mucho.

Saludos!

[de-troit]

Excelente, seguí parte de tus ejemplos y logré hacer que funcionara! :D
Pero tengo un problema, necesito que una variable miRecibidor reciba como retorno de la función getXMLinfo el array videosInfo con los datos obtenidos, de la forma:

Código Javascript:

var miRecibidor = getXMLinfo([
    'VurhzANQ_B0',
    'ZXTC0SmgE2s',
    'jUkoL9RE72o',
    'Fi_GN1pHCVc',
    'oJaBHSIRVlE',
    '94bGzWyHbu0'
]);
 

El problema es que videosInfo queda atrapada en la función que se pasa como parámetro a la función $.getJSON y no lo puedo retornar desde la función getXMLinfo :S

Tu en tu código pusiste un callback para poner los datos dentro del html, pero necesito sólamente guardar esos datos en una matriz como indiqué, ya que necesito utilizar estos datos después.

Hay alguna forma? :S

[dual3nigma]

No, lo que quieres hacer no se puede, ya que como te comentaba, los contenidos los comienzas a cargar en la funcion $.getJSON pero el codigo se sigue ejecutando osea el for loop se termina de ejecutar, al trabajar con ajax tienes que esperar a que el contenido se cargue, por eso es necesario el callback.

[de-troit]

OK, creo que podré manejar la situación llamando al callback.

Oye dual3nigma, me podrías explicar cómo funciona el método getJSON? por lo visto hace una consulta SQL a una BD de Yahoo dependiendo de lo que ponga en la URL. Cómo es exactamente?

Otra cosa, al llamar a la función callback, por qué lo haces de la forma: callback.call(null, parámetros) y no llamándolo normalmente: callback(parámetros)?

Saludos y gracias!

[dual3nigma]

Mira te explico rapidamente, por que es tema en realidad extenso. Como te comentaba no es posible cargar documentos de otro dominio, por razones de seguridad ya que esos documentos podrian contener codigo javascript, etc. Pero jQuery tiene una forma de interactuar con determinadas api's como la de flickr, yql, etc. que están hechas para funcionar de manera diferente (en realidad no se carga un documento, pero bueno eso es mas avanzado) el chiste es que YQL (Yahoo! Query Language)es una api especial que como puedes ver te permite hacer consultas un poco en el estilo de SQL a documentos xml, html, etc. te dejo el link de su consola de pruebas http://developer.yahoo.com/yql/console/ y lo de el callback se me olvido comentartelo pero pense que te seria util por lo que me decias de que estas haciendo un plugin para jQuery, la unica particularidad de utilizar Function.call es que el primer parametro (que puse en null) te permite asignar el valor que tendra "this" en la funcion de callback, si no lo pones this == window ok?

Espero haberme explicado bien y haberte sido de ayuda

Saludos!

[de-troit]

Ok, me queda un poco más claro, averiguaré con más profundidad al respecto.
Lo otro que te iba a preguntar (si es que sabes), es por qué al obtener el valor de la etiqueta <media:description> en explorer, lo devuelve vacío? Con title no ocurre, sólamente con media:description, en los demás navegadores anda todo perfecto.

Alguna idea?
Saludos! :)

[de-troit]

Ya lo solucioné, estuve analizando los datos en formato JSON en el link de la consola del YQL que me enviaste, y me dí cuenta que para explorer había que poner sólamente .find('description'), en cambio para los demás, .find('media:\\description')

Por qué debe ser así? No debería ser para explorer también como para los demás? porque la función getJSON, en este caso, obtiene los datos en formato XML o no?

Otra pregunta, por qué pones var feed = $(XMLData.results[0])?, a qué s debe el results[0]?

Saludos!

[dual3nigma]

Pues si buscas un poco más, verás que en realidad eso de los "namespaces" tanto de xml como de html es algo complicado, da muchos problemas en realidad aun en los frameworks mas conocidos, bueno es con lo que yo me he topado, por eso siempre he preferido hacer el procesamiento del xml del lado del servidor, mira te explico rapido, a YQL le pides los contenidos del xml, en formato xml (obvio) lo ideal seria en json pero tampoco maneja bien lo de los namespaces, entonces jquery los carga pero los carga como si fuera json, osea que hace un objeto, results es donde normalmente estaria todo en json, pero como solo es un xml, por eso se pone en el indice 0 y ya, me explico?

Como te decia en jQuery y en otros frameworks, eso de los "namespaces" esta amm... "buggy" todavia.

Suerte con eso!

[de-troit]

OK.

Al final cambié el tipo de retorno de datos a JSON, lo probé en Explorer 8, Firefox 3.6, Chrome 7, Safari 5.0.2, Opera 10.62, Netscape 9 y funciona bien! :D

Saludos y gracias por todo!