Until now, I had hard-coded the information about 3 songs in my Top100-application. It was time to make it dynamic, loading 100 songs from an XML-file.

The file looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<top100>
<record>
  <number>1</number>
  <artist>Captain &amp; Tennille</artist>
  <title>Do That To Me One More Time</title>
</record>
<record>
  <number>2</number>
  <artist>Irene Cara</artist>
  <title>Fame</title>
</record>
... 

So I looked for solutions to read an xml-file with javascript. Sure enough, jQuery had a solution: the XML-to-JSON jQuery plugin makes it really easy to do this.

The code

var lijst = new Object();
$.get('top100.xml', function(xml){ 
  lijst = $.xml2json(xml);
  }); 

reads the file and puts the content into the JSON object lijst:

{record:[
  { number:1, artist:'Captain & Tennille', title:'Do That To Me One More Time' },
  { number:2, artist:'Irene Cara', title:'Fame' }, 
  ...
 ]}

As an example, I can access the title of the number 1 song by using

lijst.record[0].artist

(as javascript objects start numbering from 0). Obviously, this depends on the sequence of the songs in the xml-file, i.e. if the file would start with number 100 instead of 1, or if the sequence would be random, this would no longer work. As an xml-file by definition is not “sorted”, I needed to create an extra object to contain the object reference by song number:

var numbers = new Object();
var lijst = new Object(); 
$.get('top100.xml', function(xml){ 
  lijst = $.xml2json(xml);
  for ( var rec in lijst.record )
    {
    numbers[lijst.record[rec]['number']] = rec;
    }

This results in

numbers[1] --> 0, number[2] --> 1, ...

I could now use

list.record[numbers[1]]['artist']

to get the artist information for the number 1 song.

To be able to move up and down, I needed an extra javascript variable to keep track of the current song number that is shown on the screen, and initialize the screen with that number:

var currentnumber = 100;
$.get('top100.xml', function(xml){
  lijst = $.xml2json(xml);
  for ( var rec in lijst.record )
    {
    numbers[lijst.record[rec]['number']] = rec;
    }
  $("#number").text(currentnumber);
  $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase());
  $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase());  
});

I finally added 2 arrays to display various colors for the background and the text.

♦ Related files: step6.html