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

<li class="w-nav-item level_1 has_sublevel">
<a class="w-nav-anchor level_1" href="#">
<span class="w-nav-icon"><i class="fa fa-files-o"></i></span>
<span class="w-nav-title">Animals</span>
<span class="w-nav-arrow"></span>
</a>
<!-- level 2 -->
<ul class="w-nav-list level_2">
<!---------------1 START animals with sublevel---------------->
<li class="w-nav-item level_2 has_sublevel">
    <a class="w-nav-anchor level_2" href="javascript:void(0);">
        <span class="w-nav-title">Birds </span>
        <span class="w-nav-arrow"></span>
    </a>
    <!-- level 3 -->
    <ul class="w-nav-list level_3">
        <li class="w-nav-item level_3">
            <a class="w-nav-anchor level_3" href="animals/1_sparrow.html">
                <span class="w-nav-title">Sparrow</span>
                <span class="w-nav-arrow"></span>
            </a>
        </li>
        <li class="w-nav-item level_3">
            <a class="w-nav-anchor level_3" href="animals/1_crow.html">
                <span class="w-nav-title">Crow</span>
                <span class="w-nav-arrow"></span>
            </a>
        </li>
    </ul>
</li>
<!---------------END animals with sublevel------------------>
<!---------------2 START animals with sublevel---------------->
<li class="w-nav-item level_2 has_sublevel">
    <a class="w-nav-anchor level_2" href="javascript:void(0);">
        <span class="w-nav-title">Carnivorous Animals</span>
        <span class="w-nav-arrow"></span>
    </a>
    <!-- level 3 -->
    <ul class="w-nav-list level_3">
        <li class="w-nav-item level_3">
            <a class="w-nav-anchor level_3" href="animals/2_tiger.html">
                <span class="w-nav-title">Tiger</span>
                <span class="w-nav-arrow"></span>
            </a>
        </li>
    </ul>
</li>
<!---------------END animals with sublevel------------------>
<!---------------3 START animals with sublevel---------------->

</li>
<!---------------END animals with sublevel------------------>

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

XML

<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <item>
            <animal_id>1_1</animal_id>
            <animal_title>Sparrow </animal_title>
            <animal_generic>A Sparrow Bird</animal_generic>
            <animal_category>Birds </animal_category>
            <animal_code>Code 152</animal_code>
            <animal_img>images_animals/1_1_sparrow.png</animal_img>
            <animal_url>1_sparrow.html</animal_url>
        </item>
        <item>
            <animal_id>1_2</animal_id>
            <animal_title>Crow</animal_title>
            <animal_generic>A Crow Bird</animal_generic>
            <animal_category>Birds </animal_category>
            <animal_code>Code 153</animal_code>
            <animal_img>images_animals/1_2_crow.png</animal_img>
            <animal_url>1_crow.html</animal_url>
        </item>
        <item>
            <animal_id>2_1</animal_id>
            <animal_title>Tiger </animal_title>
            <animal_generic>A Wild Tiger</animal_generic>
            <animal_category>Carnivorous Animals </animal_category>
            <animal_code>Code 151</animal_code>
            <animal_img>images_animals/2_1_tiger.png</animal_img>
            <animal_url>2_tiger.html</animal_url>
        </item>

        ...
        ...
        ...

I'm trying to append all the "items" in the xml to the menu, as per the div format of li list. After the <ul class="w-nav-list level_2">

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 = $('<option/>')
        .attr('value', countries[i])
        .text(countries[i])
        .appendTo(cList);
    });

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 '</ul>' + animal_gen(d,k);
                }
        function category_gen(d,z){
         var category_var = '<li class="w-nav-item level_2 has_sublevel"><a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">'; 
         return category_var;
        }

        function animal_gen(d,z){
          var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span class="w-nav-arrow"></span></a></li>';
         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..

Answer 1

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($('<li class="w-nav-item level_2 has_sublevel">').html('<a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + category + '</span><span class="w-nav-arrow"></span></a>' + createCategory(categoryItems) + '</li>'));
        }   //console.log($menu.html());
    }

    function createCategory(categoryItems) {
        var $list = $('<p>');
        $.each(categoryItems, function (i, dataItem) {
            var $item = $('<li class="w-nav-item level_3"></li>')
                .html('<a class="w-nav-anchor level_3" href="' + dataItem.url + '"><span class="w-nav-title">' + dataItem.title + '</span><span class="w-nav-arrow"></span></a>');
            $list.append($item);
        });

        var list_array = ['<ul class="w-nav-list level_3">' , '</ul>'];
        return list_array[0] + $list.html() + list_array[1];
    }

    function createItem() {}
});

Answer 2

I found a solution using an AJAX request and jQuery.parseXML based on this question:

Load xml from javascript

$(function() {

    $.get(
         'animals.xml', 
         {}, 
         function(data) { 
             xml = $.parseXML(data); 
             populateMenu(xml); 
         });

    function populateMenu(xml) {
        xml_items = xml.getElementsByTagName('item');
        for(var i in xml_items) {
             var animal_id = xml_items[i].childNodes[1].innerHTML;
             var animal_title = xml_items[i].childNodes[3].innerHTML;
             var animal_generic = xml_items[i].childNodes[5].innerHTML;
             var animal_category = xml_items[i].childNodes[7].innerHTML;
             var animal_code = xml_items[i].childNodes[9].innerHTML;
             var animal_img = xml_items[i].childNodes[11].innerHTML;
             var animal_url = xml_items[i].childNodes[13].innerHTML;
             $('.w-nav-list.level_3').append('<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="'+animal_img+'"><span class="w-nav-title">'+animal_title+'</span><span class="w-nav-arrow"></span></a></li>');   
        }
    }
});

The code can be highly optimized, but it can help you to figure out how to do it.

Here is a working jsfiddle.