Parse XML in jQuery

Question

I posted earlier today (Old Question) asking for help to parse XML. I did not realise at the time that the solution did not fully solve my problem.

My issue is that although I can parse the XML by finding individual elements, I need to take a note of what level each item is under. The number of items and categories varies for each XML doc, but are all structured the same way.

<?xml version="1.0"?>
<config>
<game>
    <title>Dementia</title>
        <cat>
            <catTitle>Mild</catTitle>
            <item>mild-1</item>
            <item>mild-2</item>
            <item>mild-3</item>
        </cat>
        <cat>
            <catTitle>Moderate</catTitle>
            <item>Moderate-1</item>
            <item>Moderate-2</item>
            <item>Moderate-3</item>
        </cat>
        <cat>
            <catTitle>Severe</catTitle>
            <item>Severe-1</item>
            <item>Severe-2</item>
        </cat>
</game>

For example, when 'find("item")' is used, I need it to also take a note of which it was under (0,1,2,3,4 etc). The same is needed for the catTitle.

I would then want to assign this number as an attribute. This will allow me to easily compare if the item matches to its category, based on the .

Currently I have the following:

    //XML Array
///////////////////////////////////////
function loadXML(){
  $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: parseXMLtoArray
        }); 
}

function parseXMLtoArray(xml){

$(xml).find("cat").each(function(idx, v) {
    categoryArrays[idx] = [];

    $(v).find("item").each(function( i , vi) {
        categoryArrays[idx].push( $(vi).text() );
    });             
});
console.log(categoryArrays);
}
///////////////////////////////////////

To give a better understanding of what the purpose for this I have attached a screenshot:

The user drags the 'item' to its correct category at the bottom, then based on if it is correct or not, it is droppable.

Any help would be GREATLY appreciated!

Answer 1

I figured it out. I parsed the XML into arrays and created an object for each item also, adding an attribute (.attr) of its category, so that it could be called later.

//XML Array
///////////////////////////////////////
function loadXML(){
  $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: parseXMLtoArray
        }); 
}


function parseXMLtoArray(xml){

$(xml).find("cat").each(function(idx, v) {
    categoryArrays[idx] = [];

    $(v).find("catTitle").each(function(){

        //$(xml).find('title:contains("Dimentia")').each(function(){
        numberofCategories = numberofCategories+1;
        tmpCategory = $(this).text();
        categoryNames.push(tmpCategory);

        var $item = $('<div>' + tmpCategory + '</div>').fadeIn('slow').appendTo('#catPile').attr('categoryName', tmpCategory).attr('categoryNum', idx).droppable({
            containment: '#content',
            stack: '#catPile div',
            cursor: 'move',
            drop: handleDropEvent
        });

    });



    //ITEM PARSING
        $(v).find("item").each(function( i , vi) {
            categoryArrays[idx].push( $(vi).text() );

            numberofItems = numberofItems+1;
            tmpItem = $(this).text();

            //Add Item to Array
            itemNames.push(tmpItem);

                   //UI CREATION and Atrribute setting
                    var $item = $('<div>' + tmpItem + '</div>').fadeIn('slow').appendTo('#itemPile').attr('itemName', tmpItem).attr('categoryNum', categoryArrayNum).draggable({
                        containment: '#content',
                        stack: '#itemPile div',
                        cursor: 'move',
                        revert: true
                    });

                    console.log("Item Created: " + tmpItem + " // Item's Category:" + categoryArrayNum) ;

        });


    console.log('-- Category Array Num: ' + categoryArrayNum + ' contains: ' + categoryArrays[categoryArrayNum]);
    categoryArrayNum++;
});

console.log("// ITEMS ASSIGNED TO CATEGORIES");
}

Hope this helps someone!