title: How to create an XML based Menu?
body: <p>I'm trying to create a menu from an xml file, via jquery. </p>
  
  <p>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...</p>
  
  <p>Here's the code in which I need to add my menu to: </p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;li class="w-nav-item level_1 has_sublevel"&gt;
  &lt;a class="w-nav-anchor level_1" href="#"&gt;
  &lt;span class="w-nav-icon"&gt;&lt;i class="fa fa-files-o"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;span class="w-nav-title"&gt;Animals&lt;/span&gt;
  &lt;span class="w-nav-arrow"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;!-- level 2 --&gt;
  &lt;ul class="w-nav-list level_2"&gt;
  &lt;!---------------1 START animals with sublevel----------------&gt;
  &lt;li class="w-nav-item level_2 has_sublevel"&gt;
      &lt;a class="w-nav-anchor level_2" href="javascript:void(0);"&gt;
          &lt;span class="w-nav-title"&gt;Birds &lt;/span&gt;
          &lt;span class="w-nav-arrow"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;!-- level 3 --&gt;
      &lt;ul class="w-nav-list level_3"&gt;
          &lt;li class="w-nav-item level_3"&gt;
              &lt;a class="w-nav-anchor level_3" href="animals/1_sparrow.html"&gt;
                  &lt;span class="w-nav-title"&gt;Sparrow&lt;/span&gt;
                  &lt;span class="w-nav-arrow"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="w-nav-item level_3"&gt;
              &lt;a class="w-nav-anchor level_3" href="animals/1_crow.html"&gt;
                  &lt;span class="w-nav-title"&gt;Crow&lt;/span&gt;
                  &lt;span class="w-nav-arrow"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!---------------END animals with sublevel------------------&gt;
  &lt;!---------------2 START animals with sublevel----------------&gt;
  &lt;li class="w-nav-item level_2 has_sublevel"&gt;
      &lt;a class="w-nav-anchor level_2" href="javascript:void(0);"&gt;
          &lt;span class="w-nav-title"&gt;Carnivorous Animals&lt;/span&gt;
          &lt;span class="w-nav-arrow"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;!-- level 3 --&gt;
      &lt;ul class="w-nav-list level_3"&gt;
          &lt;li class="w-nav-item level_3"&gt;
              &lt;a class="w-nav-anchor level_3" href="animals/2_tiger.html"&gt;
                  &lt;span class="w-nav-title"&gt;Tiger&lt;/span&gt;
                  &lt;span class="w-nav-arrow"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!---------------END animals with sublevel------------------&gt;
  &lt;!---------------3 START animals with sublevel----------------&gt;
  
  &lt;/li&gt;
  &lt;!---------------END animals with sublevel------------------&gt;
  </code></pre>
  
  <p>And here's the XML From which I need to create the menu..: </p>
  
  <h2>XML</h2>
  
  <pre><code>&lt;items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"&gt;
          &lt;item&gt;
              &lt;animal_id&gt;1_1&lt;/animal_id&gt;
              &lt;animal_title&gt;Sparrow &lt;/animal_title&gt;
              &lt;animal_generic&gt;A Sparrow Bird&lt;/animal_generic&gt;
              &lt;animal_category&gt;Birds &lt;/animal_category&gt;
              &lt;animal_code&gt;Code 152&lt;/animal_code&gt;
              &lt;animal_img&gt;images_animals/1_1_sparrow.png&lt;/animal_img&gt;
              &lt;animal_url&gt;1_sparrow.html&lt;/animal_url&gt;
          &lt;/item&gt;
          &lt;item&gt;
              &lt;animal_id&gt;1_2&lt;/animal_id&gt;
              &lt;animal_title&gt;Crow&lt;/animal_title&gt;
              &lt;animal_generic&gt;A Crow Bird&lt;/animal_generic&gt;
              &lt;animal_category&gt;Birds &lt;/animal_category&gt;
              &lt;animal_code&gt;Code 153&lt;/animal_code&gt;
              &lt;animal_img&gt;images_animals/1_2_crow.png&lt;/animal_img&gt;
              &lt;animal_url&gt;1_crow.html&lt;/animal_url&gt;
          &lt;/item&gt;
          &lt;item&gt;
              &lt;animal_id&gt;2_1&lt;/animal_id&gt;
              &lt;animal_title&gt;Tiger &lt;/animal_title&gt;
              &lt;animal_generic&gt;A Wild Tiger&lt;/animal_generic&gt;
              &lt;animal_category&gt;Carnivorous Animals &lt;/animal_category&gt;
              &lt;animal_code&gt;Code 151&lt;/animal_code&gt;
              &lt;animal_img&gt;images_animals/2_1_tiger.png&lt;/animal_img&gt;
              &lt;animal_url&gt;2_tiger.html&lt;/animal_url&gt;
          &lt;/item&gt;
  
          ...
          ...
          ...
  </code></pre>
  
  <p>I'm trying to append all the "items" in the xml to the menu, as per the div format of li list. After the <code>&lt;ul class="w-nav-list level_2"&gt;</code></p>
  
  <p>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.</p>
  
  <h2>not related to the question, but a simple code</h2>
  
  <pre><code>var cList = $('ul.w-nav-list.level_2')
      $.each(data, function(i)
      {
      var cat_no = data.id.split('_');
      var opt = $('&lt;option/&gt;')
          .attr('value', countries[i])
          .text(countries[i])
          .appendTo(cList);
      });
  </code></pre>
  
  <p>I have the <code>XML id</code> in the format of: </p>
  
  <h2>XML ID format</h2>
  
  <pre><code>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,
  </code></pre>
  
  <p>..... like this there are about 10-13 categories with about 100 xml items.</p>
  
  <p>I believe something of this sort should do:</p>
  
  <pre><code>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&lt;=data.length) for all data.xml_id==i: add category + item divs, li, ul, /li, /ul) }
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's what I'm trying to do in javasacript/jquery: </p>
  
  <h1>Javascript</h1>
  
  <pre><code>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&lt;=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&lt;=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 '&lt;/ul&gt;' + animal_gen(d,k);
                  }
          function category_gen(d,z){
           var category_var = '&lt;li class="w-nav-item level_2 has_sublevel"&gt;&lt;a class="w-nav-anchor level_2" href="javascript:void(0);"&gt;&lt;span class="w-nav-title"&gt;' + d[z].category + '&lt;/span&gt;&lt;span class="w-nav-arrow"&gt;&lt;/span&gt;&lt;/a&gt;&lt;ul class="w-nav-list level_3"&gt;'; 
           return category_var;
          }
  
          function animal_gen(d,z){
            var animal_var = '&lt;li class="w-nav-item level_3"&gt;&lt;a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"&gt;&lt;span class="w-nav-title"&gt;' + d[z].title + '&lt;/span&gt;&lt;span class="w-nav-arrow"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;';
           return animal_var;
          }
  
      },  error: function(){console.log('Error: Animals info xml could not be loaded.');}
          });
  });
  </code></pre>
  
  <p>Please could someone provide help regarding this?</p>
  
  <p>Here's the jsfiddle WITHOUT the menu filled in html: <a href="http://jsfiddle.net/mohitk117/d7XmQ/2/" rel="nofollow">http://jsfiddle.net/mohitk117/d7XmQ/2/</a></p>
  
  <p>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: <a href="http://jsfiddle.net/mohitk117/r6LQg/" rel="nofollow">http://jsfiddle.net/mohitk117/r6LQg/</a></p>
  
  <p>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.</p>
  
  <h2>EDIT:</h2>
  
  <p>Updated the javascript code... +
  Updated jsfiddle: <a href="http://jsfiddle.net/mohitk117/d7XmQ/4/" rel="nofollow">http://jsfiddle.net/mohitk117/d7XmQ/4/</a></p>
  
  <h2>Thanks..</h2>