Trouble with jQuery multidimensional array and XML

I’m building a little online gallery from scratch, mostly as an exercise for myself.

I’d like to set it up so that I can read the contents of an XML file and then populate the page accordingly. The XML has this basic structure (I’ll probably add more items within <artItem> in the future):

[CODE]<gallery>
<artItem>
<category>Category 1</category>
<imageFile>image1.jpg</imageFile>
<description>Description text 1</description>
</artItem>
<artItem>
<category>Category 2</category>
<imageFile>image2.jpg</imageFile>
<description>Description text 2</description>
</artItem>
<artItem>
<category>Category 3</category>
<imageFile>image3.jpg</imageFile>
<description>Description text 3</description>
</artItem>
</gallery>[/CODE]

And my jQuery script looks like this:

[CODE]
// Start function when DOM has completely loaded
$(document).ready(function(){

// Open the xml file
$.get(“myXML.xml”,{},function(xml){

// Set up the arrays
var gallery = [];
var artPiece = [];

// Counter
var count = 0;

$(‘artItem’,xml).each(function() {

// Handle text elements
cat= $(this).find(“category”).text();
art = $(this).find(“imageFile”).text();
desc = $(this).find(“description”).text();

// Handle image URL
theArt = buildImageURL(art);

// Populate the array
artPiece.push(cat,art,desc);

gallery[count] = [];

gallery[count].push(artPiece);

count++;

});

// Update divs

$(“#contentArea1a”).append(gallery[0][0]);
$(“#contentArea1b”).append(gallery[0][1]);
$(“#contentArea1c”).append(gallery[0][2]);

$(“#contentArea2a”).append(gallery[1][0]);
$(“#contentArea2b”).append(gallery[1][1]);
$(“#contentArea2c”).append(gallery[1][2]);

$(“#contentArea2a”).append(gallery[2][0]);
$(“#contentArea2b”).append(gallery[2][1]);
$(“#contentArea2c”).append(gallery[2][2]);

// etc…
});
});

function buildImageURL(image){
// Build URL and return
output = ”;
output += ‘<img src=”‘ + image +'”>’;
return output;
}[/CODE]

The section of code under “Update divs” will be replaced by some other scripting to handle the UI (such as previous and next buttons, etc) – but I just chumped it out here to see what’s happening. Also, I won’t have a set number of <artItem>’s within the XML, even though I started with only 3 for testing.

My problem is that the gallery array seems to be empty. Obviously, I’m handling the array totally wrong. Can you please help?

Thanks!

Also in #JavaScript _↴