Array de objectos desde XML con JQuery

[mrc2407]

Buenas!

A ver si me explico bien, pues es la primera vez que uso JQuery (y Javascript, de hecho) y no tengo mucha idea...

Quiero poner un reproducotr de música en una página web. Encontré el jPlayer (http ://www.happyworm.com/jquery/jplayer) y me gustó la segunda demo (http ://www.happyworm.com/jquery/jplayer/latest/demo-02.htm), así que intenté copiarla.

Por lo visto, el jPlayer carga las playlists de la siguiente forma:

Código Javascript:

var myPlayList = [
        {name:"Tempered Song",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-01-Tempered-song.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-01-Tempered-song.ogg"},
        {name:"Hidden",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-02-Hidden.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-02-Hidden.ogg"},
        {name:"Lentement",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-03-Lentement.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-03-Lentement.ogg"},
        {name:"Lismore",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-04-Lismore.ogg"},
        {name:"The Separation",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-05-The-separation.ogg"},
        {name:"Beside Me",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-06-Beside-me.ogg"},
        {name:"Bubble",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-07-Bubble.ogg"},
        {name:"Stirring of a Fool",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"},
        {name:"Partir",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-09-Partir.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-09-Partir.ogg"},
        {name:"Thin Ice",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-10-Thin-ice.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-10-Thin-ice.ogg"}
    ];
 

Yo quiero cargar la playlist desde un archivo XML para podr hacer una playlist dinámica y no tener que estar modificando el archivo cada vez (además, así puedo cargar cosas desde una base de datos vía PHP). Miré por internet y encontré que podría hacerlo así:

Código Javascript:

var myPlayList = [];
            
            $.ajax({
                type: "GET",
                url: "playlist.xml",
                dataType: "xml",
                success: function(xml) {
                    
                    $(xml).find('song').each(function(){
                        var id = $(this).attr('id');
                        var title = $(this).find('title').text();
                        var mp3 = $(this).find('mp3').text();
                        var ogg = $(this).find('ogg').text();
                        var plays = $(this).find('plays').text();
                        
                        document.write(id + " - ");
                        document.write(title);
                        document.write(" (" + mp3 + ", ");
                        document.write(ogg + ")");
                        document.write(" - " + plays + "<br />");
                        
                        myPlayList.push({name:title,mp3:mp3,ogg:ogg,plays:plays});
                    });
                    
                }       
            });
 

el problema que tengo es que si salgo del bloque de código e intento mostrar algun valor de este array no me devuelve nada:

Código Javascript:

$(document).ready(function(){
            var playItem = 0;
            
            var myPlayList = [];
            
            $.ajax({
                type: "GET",
                url: "playlist.xml",
                dataType: "xml",
                success: function(xml) {
                    
                    $(xml).find('song').each(function(){
                        var id = $(this).attr('id');
                        var title = $(this).find('title').text();
                        var mp3 = $(this).find('mp3').text();
                        var ogg = $(this).find('ogg').text();
                        var plays = $(this).find('plays').text();
                        
                        document.write(id + " - ");
                        document.write(title);
                        document.write(" (" + mp3 + ", ");
                        document.write(ogg + ")");
                        document.write(" - " + plays + "<br />");
                        
                        myPlayList.push({name:title,mp3:mp3,ogg:ogg,plays:plays});
                    });
                    
                }       
            });
                    
            document.write(myPlayList[0].name);
 

Esto, por ejemplo, no muestra nada.

La estructura XML es:

Código XML:

<songs>
        <song id="0">
                <title>Tramaran anar a Mart</title>
                <mp3>tramaran.mp3</mp3>
                <ogg>tramaran.ogg</ogg>
                <plays>328</plays>
        </song>
        <song id="1">
                <title>Les Quatre Estacions</title>
                <mp3>quatreestacions.mp3</mp3>
                <ogg>quatreestacions.ogg</ogg>
                <plays>122</plays>
        </song>
        <song id="2">
                <title>D'aquí 5 anys</title>
            <mp3>5anys.mp3</mp3>
            <ogg>5anys.ogg</ogg>
                <plays>299</plays>
        </song>
</songs>
 

Resumiendo, quería substituir el array "myPlayList" por otro array igual pero que obtenga valores a través de XML... Alguna ayudita, por favor?

[kokoou]

El archivo original de playlist del jPlayer que tú muestras esta con json, y si revisas la función $.ajax(), puedes tomar los valores por json. Yo te recomiendo hacer directamente eso y no tenes que parsear el xml para armar las listas, sino que te generas un archivo de playlist dinámicas en json y listo.

Eso haría yo.

[mrc2407]

Podrías poner un ejemplo de como hacerlo? No tengo ni idea... :S

[kokoou]

Te creas un archivo json o un php, que tiene una función para retornar la representacion JSON de un array. La funcion es json_encode( $array ).

En caso de usar un archivo ya armado, por ejemplo:

myPlayList.json

Código JSON:

[
        {name:"Tempered Song",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-01-Tempered-song.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-01-Tempered-song.ogg"},
        {name:"Hidden",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-02-Hidden.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-02-Hidden.ogg"},
        {name:"Lentement",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-03-Lentement.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-03-Lentement.ogg"},
        {name:"Lismore",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-04-Lismore.ogg"},
        {name:"The Separation",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-05-The-separation.ogg"},
        {name:"Beside Me",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-06-Beside-me.ogg"},
        {name:"Bubble",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-07-Bubble.ogg"},
        {name:"Stirring of a Fool",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"},
        {name:"Partir",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-09-Partir.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-09-Partir.ogg"},
        {name:"Thin Ice",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-10-Thin-ice.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-10-Thin-ice.ogg"}
    ]
 

Y luego lo llamas desde javascrip de esta manera:

Código Javascript:

$(document).ready(function(){
  $.ajax({
    url: "myPlayList.json",
    dataType: "json",
    success: 
      function( data ){
        alert( data ); // data = array de objetos
        alert( data[0].name ); // nombre del objeto 1       
      }
  });
});
 

[mrc2407]

Oh, perfecto! :) Nunca me había mirado jQuery, tendré que empezar a usarlo de vez en cuando...

Muchísimas gracias! :)

PD: no se si sirve de algo, pero te he dado un poco de karma por la rapidez de la respuesta :)