Noob Trouble with XML and Multidimensional Array

Noob Trouble with XML and Multidimensional Array

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):

<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>


And my jQuery script looks like this:

// 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;
}


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.

Here's a basic comp of what it's intended to be:

Image

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

Thanks!