How To Create An Xml Based Menu?

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

Solution 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 parsedataType: "xml",
        success: handleResponse,
        error: function () {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });

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

    functionparseResponse(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()
            };
        });
    }

    functioncreateMenu($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());
    }

    functioncreateCategory(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];
    }

    functioncreateItem() {}
});

Solution 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); 
         });

    functionpopulateMenu(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.