How to create append a div to a menu via XML + jQuery?

JavaScript
1

Hi! 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:

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

<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<item>
		<product_id>1_1</product_id>
		<product_title>Sparrow*</product_title>
		<product_generic>A Sparrow Bird</product_generic>
		<product_category>Birds*</product_category>
		<product_code>Code 152</product_code>
		<product_img>images_animals/1_1_sparrow.png</product_img>
		<product_url>1_sparrow.html</product_url>
	</item>
	<item>
		<product_id>1_2</product_id>
		<product_title>Crow</product_title>
		<product_generic>A Crow Bird</product_generic>
		<product_category>Birds*</product_category>
		<product_code>Code 153</product_code>
		<product_img>images_animals/1_2_crow.png</product_img>
		<product_url>1_crow.html</product_url>
	</item>
	<item>
		<product_id>2_1</product_id>
		<product_title>Tiger*</product_title>
		<product_generic>A Wild Tiger</product_generic>
		<product_category>Carnivorous Animals </product_category>
		<product_code>Code 151</product_code>
		<product_img>images_animals/2_1_tiger.png</product_img>
		<product_url>2_tiger.html</product_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.

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


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.

Please could someone provide help regarding this?

Thanks…

2

Hi,

First things first, we need to get the XML in a variable so it can be parsed and you can construct your menu.
How are you reading the XML file?

3

Hi Pullo,

I already got an answer to my question on stackoverflow! I then edited the code and the script is running perfectly well!

Here’s the code from the [ :: stackoverflow question :: ]

"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() {}
});
4

Ok, thanks for letting us know.