¿Cómo crear un menú basado en XML?

Estoy tratando de crear un menú a partir de un archivo xml, a través de jquery.

Necesito ejecutar el script para esto, en la ventana de carga. Es un menú desplegable con algo de código jquery en mis plugins.js. Estoy tratando de agregar completamente todos los elementos del xml al UL de la clase de la lista de menú …

Aquí está el código en el que necesito agregar mi menú a:

HTML

  • Animals
  • Y aquí está el XML Desde el cual necesito crear el menú …:

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

    Estoy tratando de agregar todos los “elementos” en el xml al menú, según el formato div de la lista li. Después de

      Tengo este código, que estaba usando para agregar “países” en mi formulario de contacto, pero no sé cómo cambiarlo para agregar los divs necesarios.

      No relacionado con la pregunta, sino un simple código.

       var cList = $('ul.w-nav-list.level_2') $.each(data, function(i) { var cat_no = data.id.split('_'); var opt = $('') .attr('value', countries[i]) .text(countries[i]) .appendTo(cList); }); 

      Tengo el XML id en el formato de:

      Formato de ID XML

       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, 

      ….. así, hay alrededor de 10-13 categorías con aproximadamente 100 elementos xml.

      Creo que algo de este tipo debería hacer:

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

      Lo anterior es solo un tipo de algoritmo o una forma de cómo creo que se puede hacer esto … No sé cómo hacerlo en jquery / javascript.

      Esto es lo que estoy tratando de hacer en 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.');} }); });

      Por favor, ¿podría alguien proporcionar ayuda con respecto a esto?

      Aquí está el jsfiddle SIN el menú completado en html: http://jsfiddle.net/mohitk117/d7XmQ/2/

      Y aquí está el jsfiddle, CON el menú relleno en html, esta es una idea general de lo que estoy tratando de obtener en el menú, pero solo se crea de forma dinámica a través de jquery + xml y no está codificado como el ejemplo html aquí: http: //jsfiddle.net/mohitk117/r6LQg/

      No sabía cómo cargar el xml en el violín, y tampoco sabía qué código javascript escribir, así que mantuve el código similar a un algoritmo.

      EDITAR:

      Se actualizó el código javascript … + Se actualizó jsfiddle: http://jsfiddle.net/mohitk117/d7XmQ/4/

      Gracias..

      Hice otra pregunta por el mismo problema, pero la nueva pregunta era diferente. Y recibí una respuesta de DannyFritz con la respuesta . Su código agota perfectamente el archivo xml y coloca los campos revelantes en un formato de lista. Eso no era exactamente lo que estaba tratando de hacer, pero después de algunas adiciones y pequeños cambios más fáciles, conseguí que el menú funcionara.

      Aquí está el código editado completo de mi versión del menú basado en xml: [ ::: 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() {} });

      Encontré una solución utilizando una solicitud AJAX y jQuery.parseXML basado en esta pregunta:

      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('
    • '+animal_title+'
    • '); } } });

      El código puede ser altamente optimizado, pero puede ayudarlo a descubrir cómo hacerlo.

      Here hay un jsfiddle de trabajo.