How to create an XML based Menu?

Question

I'm trying to create a menu from an xml file, via jquery.

I need to run the script for this, on window-load. It's a dropdown menu with some jquery code to it in my plugins.js I'm trying to completely add all the items of the xml to the UL of the menu list class...

Here's the code in which I need to add my menu to:

HTML




Animals






    
        Birds 
        
    
    
    
        
            
                Sparrow
                
            
        
        
            
                Crow
                
            
        
    




    
        Carnivorous Animals
        
    
    
    
        
            
                Tiger

And here's the XML From which I need to create the menu..:

XML


        
            1_1
            Sparrow 
            A Sparrow Bird
            Birds 
            Code 152
            images_animals/1_1_sparrow.png
            1_sparrow.html
        
        
            1_2
            Crow
            A Crow Bird
            Birds 
            Code 153
            images_animals/1_2_crow.png
            1_crow.html
        
        
            2_1
            Tiger 
            A Wild Tiger
            Carnivorous Animals 
            Code 151
            images_animals/2_1_tiger.png
            2_tiger.html
        

        ...
        ...
        ...

I'm trying to append all the "items" in the xml to the menu, as per the div format of li list. After the

I have this code, that I was using to add "countries" to in my contact form, but I don't know how to change it to add the required divs.

not related to the question, but a simple code

var cList = $('ul.w-nav-list.level_2')
    $.each(data, function(i)
    {
    var cat_no = data.id.split('_');
    var opt = $('

I have the XML id in the format of:

XML ID format

1_1: first item, category 1,
1_2: second item, category 1,
1_3: third item, category, 1,
2_1: fourth item, category 2,
3_1: fifth item, category 3,

..... like this there are about 10-13 categories with about 100 xml items.

I believe something of this sort should do:

ajax: xml_url, etc
xml response, data ,

data.xml_id.split('_'); //to get the first element of the xml id, but I guess this would only return the last element. Don't know how to change it to return first element.


    function add_menu(){
$('ul.w-nav-list level_2').append(data, function ( ){ for(i=0;i<=data.length) for all data.xml_id==i: add category + item divs, li, ul, /li, /ul) }

The above is just a kindof alogrithm or a way of how I think this can be done... I don't know how to do this in jquery/javascript.

Here's what I'm trying to do in javasacript/jquery:

Javascript

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';


$(function() {

$.ajax({
    url: animalsXMLurl, // name of file you want to parse
    dataType: "xml",

    success: function parse(xmlResponse){

        var data = $("item", xmlResponse).map(function() {
         return {
             id: $("animal_id", this).text(),
             title: $("animal_title", this).text(),
             url: $("animal_url", this).text(), 
             category: $("animal_category", this).text().split('/'),
         };
         }).get();
        var categnumber = new Array();
        for(i=0;i<=data.length;i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
         {   categnumber[i] = data[i].id.split('_');
         console.log(categnumber[i][0]); 
        for(j=0;j<=data.length;j++) //appending via a function.
        {  var data_text = category_or_animal(data, categnumber, j);
        console.log(data_text);
            $('ul.w-nav-list.level_2').append( data_text );
        }
        }


                function category_or_animal(d, catg, k){
                var catg1 = new Array();
                var catg2 = new Array();
                var catg1 = d[k].id.split('_');
                if(d[k-1]){
                var catg2 = d[k-1].id.split('_');
                //if(d[k-1].id)
                    if (catg1[0] != catg2[0])
                      return category_gen(d,k);
                }    else return '

' + animal_gen(d,k);
                }
        function category_gen(d,z){
         var category_var = '

' + d[z].category + '

'; 
         return category_var;
        }

        function animal_gen(d,z){
          var animal_var = '' + d[z].title + '';
         return animal_var;
        }

    },  error: function(){console.log('Error: Animals info xml could not be loaded.');}
        });
});

Please could someone provide help regarding this?

Here's the jsfiddle WITHOUT the menu filled in html: http://jsfiddle.net/mohitk117/d7XmQ/2/

And here's the jsfiddle, WITH the menu filled in html, this is the a general idea of what I'm trying to get in the menu, but only being created dynamically via jquery+xml and not hardcoded like the html example here: http://jsfiddle.net/mohitk117/r6LQg/

I didn't know how to upload the xml to the fiddle, and also didn't know what javascript code to write down, so I kept the code similar to an alogrithm.

EDIT:

Updated the javascript code... + Updated jsfiddle: http://jsfiddle.net/mohitk117/d7XmQ/4/

Thanks..

mk117 · Accepted Answer

I asked another question for the same problem, but the new question was different. And I received a reply from DannyFritz with the answer. His code perfectly exhausts the xml file and puts the revelant fields into a list format. That was not completely what I was trying to do, but after some additions and minor easier changes, I got the menu functioning.

Here's the complete edited code of my version of the xml based menu: [ ::: JsFiddle ::: ]

"use strict";

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';

$(function () {

    var $menu = $('.w-nav-list.level_2');

    $.ajax({
        url: animalsXMLurl, // name of file you want to parse
        dataType: "xml",
        success: handleResponse,
        error: function () {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });

    function handleResponse(xmlResponse) {
        var $data = parseResponse(xmlResponse);
        createMenu($data);
    }

    function parseResponse(xmlResponse) {
        return $("item", xmlResponse).map(function () {
            var $this = $(this);
            return {
                id: $this.find("animal_id").text(),
                title: $this.find("animal_title").text(),
                url: $this.find("animal_url").text(),
                category: $this.find("animal_category").text()
            };
        });
    }

    function createMenu($data) {
        var categories = {};
        $data.each(function (i, dataItem) {
            if (typeof categories[dataItem.category] === 'undefined') {
                categories[dataItem.category] = [];
            }
            categories[dataItem.category].push(dataItem);
        });
        for (var category in categories) {
            var categoryItems = categories[category];
            $menu.append($('').html('' + category + '' + createCategory(categoryItems) + ''));
        }   //console.log($menu.html());
    }

    function createCategory(categoryItems) {
        var $list = $('');
        $.each(categoryItems, function (i, dataItem) {
            var $item = $('
')
                .html('' + dataItem.title + '');
            $list.append($item);
        });

        var list_array = ['' , ''];
        return list_array[0] + $list.html() + list_array[1];
    }

    function createItem() {}
});