How to load contents of XML file sequentially into HTML using jQuery

Question

How do I use jQuery to read the first item in the contents of an XML file called music.xml, display them in a DIV for five seconds, read the next XML item and display that for five seconds, loop through the XML file and then start again from the beginning?

HTML:

<div id="music">
    <div id="albumcover"></div>
    <div id="songdescription"></div>
</div>

music.xml

<songs>
    <item>
        <image>music_01.jpg</image>
        <description>Description of first song</description>
    </item>
    <item>
        <image>music_02.jpg</image>
        <description>Description of second song</description>
    </item>
    <item>
        <image>music_03.jpg</image>
        <description>Description of third song</description>
    </item>
</songs>

Answer 1

Try something like this:

$.ajax({
  'dataType': 'xml',
  'success': function(xml)
  {
    $(xml).find('item').each(function()
    {
      var image = $(this).find('image').text();
      var description = $(this).find('description').text();

      $('<div id="music" />')
        .append($('<div id="albumcover" />').append($('<img />').attr('src', image)))
        .append($('<div id="songdescription" />').text(description))
        .appendTo('body');
    });

    // Add the code for the carousel here.
  },
  'type': 'get',
  'url': 'music.xml'
});

You'll have to adjust the paths (for the xml file and where the images are located) as well as where you want it added in the document. Currently, it'll append right before the closing BODY element.

Then, I'd recommend looking for a carousel jQuery plugin that will rotate through them rather than you having to deal with that part of it. You should check out jCarousel Lite .

Answer 2

First off, the way that I know how to parse these using jQuery will give problems with the image tag ( edit: only if you parse text; XML turns out to be fine), as once you wrap it in jQuery it will convert <image>text</image> to <img>text . You can deal with that, but it's not pretty. So let's assume you've renamed <image> to <cover> .

Working jsFiddle , minus the $.ajax request part.

var music = [];
var musicIndex = -1;
var delay = 5000;
var intervalId; // in case you want to clearInterval
var $cover = $("#albumcover");
var $desc = $("#songdescription");

function rotateMusic() {
  // Loop back to the beginning if necessary
  if (++musicIndex === music.length) {
    musicIndex = 0;
  }
  console.log(music[musicIndex].cover);

  // Create a new image, tell it to append itself and description
  // once it's loaded, tell it to load
  $("<img>").load(function() {
    $cover.empty().append($(this));
    $desc.text(music[musicIndex].desc);
  }).attr("src", music[musicIndex].cover);
}

$.ajax({
  type: "GET",
  url: "music.xml",
  dataType: "xml",
  success: function(xml) {
             // Parse each item as a node
             $(xml).find('item').each(function() {
               // Add contents of item to music array
               var $item = $(this);
               music.push({
                 cover: $item.find('image').text(),
                 desc: $item.find('description').text()
               });

             });
             // Start rotating music, then set it to a delay
             rotateMusic();
             intervalId = setInterval(rotateMusic, delay);
           }
});