Nivel múltiple xml a la lista desordenada en jquery

Me estoy tirando de pelos tratando de crear una lista desordenada de un archivo xml sin suerte hasta ahora. Sé cómo procesar el xml de jQuery pero no puedo descifrar cómo hacer la lista desordenada de varios niveles.Nivel múltiple xml a la lista desordenada en jquery

Esto es lo que he logrado hasta ahora.

El archivo XML

<?xml version="1.0" encoding="utf-8"?> 
<Parent>Director 
    <Children>Exe Director1</Children> 
    <Children>Exe Director2</Children> 
    <Parent>Exe Director2 
     <Children>Sub Director 1</Children> 
     <Children>Sub Director 2</Children> 
     <Parent>Sub Director 3 
      <Children>Cameraman 1</Children> 
      <Children>Cameraman 2</Children> 
     </Parent> 
    </Parent>  
</Parent>

el archivo HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    var levels; 
    $(document).ready(function() 
    { 
     $.ajax({ 
      type: "GET", 
      url: "test.xml", 
      dataType: "xml", 
      success: xmlParser 
     }); 
    }); 
    function xmlParser(xml) 
{ 
    $(xml).find("Children").each(function() 
    { 
     var text = $(this).text(); 
    }); 
} 
</script> 
</head> 
<body> 
    <div id="ListContainer"></div> 
</body> 
</html>

Esta es la lista de espera

<ul> 
    <li>Exe Director1</li> 
    <li>Exe Director2</li> 
    <ul> 
     <li>Sub Director 1</li> 
     <li>Sub Director 2</li> 
     <ul> 
      <li>Cameraman 1</li> 
      <li>Cameraman 2</li> 
     </ul> 
    </ul> 
</ul>

Pueden ustedes por favor me ayude!

Editar:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    var levels; 
    $(document).ready(function() 
    { 
     $.ajax({ 
      type: "GET", 
      url: "test.xml", 
      dataType: "xml", 
      success: function (xml) { xmlParser($(xml)); } 
     }); 
    }); 
    function xmlParser(xml) { 
     //alert($(xml).contents()); 
     var $ul = $("<ul>"); // For each Parent, create an <ul> 
     $(xml).contents().each(function (i, el) { 
      if (el.nodeType == 3) return true; 
      if (el.nodeName.toUpperCase() == "CHILDREN") 
      { 
       $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children 
      } else 
      { 
       $ul.append(xmlParser($(el))); // Recursively append the other Parent 
      } 
      //$("#ListContainer").append($ul); 
     }); 
     //alert($ul.html()); 
     $("#ListContainer").append($ul); 
    } 
</script> 
</head> 
<body> 
    <div id="ListContainer"></div> 
</body> 
</html>

Fuente

2012-09-29 Harsha Venkatram

@Bergi Entiendo que necesito iterar sobre 'Children' para crear la lista. Pero para hacerlo de manera recursiva, ¿tengo que actuar sobre' parents ("Parent") '? Mi conocimiento en jQuery es bastante limitado. Lo siento. –

No es un problema de jQuery, sino un problema de programación estándar. Usted puede (¿y debería?) Resolverlo sin jQuery, también. Intente iterar el DOM * tree *, en lugar de todos los elementos (de un tipo) a la vez. – Bergi

construir de forma recursiva la lista desordenada:

function xmlParser($xml) { 
    var $ul = $("<ul>"); // For each Parent, create an <ul> 
    $xml.contents().each(function (i, el) { 
     if (el.nodeType == 3) return true; 
     if (el.nodeName.toUpperCase() == "CHILDREN") { 
      $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children 
     } else { 
      $ul.append(xmlParser($(el))); // Recursively append the other Parent 
     } 
    }); 
    return $ul; 
}

Aquí hay una DEMO. Piense en cada grupo Parent y respectivos Children como una unidad separada. Por ejemplo, si el código XML parecía el siguiente:

<Parent>Director 
    <Children>Exe Director1</Children> 
    <Children>Exe Director2</Children> 
</Parent>

El HTML resultante sería:

<ul> 
    <li>Exe Director1</li> 
    <li>Exe Director2</li> 
</ul>

¿Cómo construir esto? Es bastante simple: cree un elemento <ul> y para cada Children agregue un elemento <li>. Ahora, para la parte recursiva, cuando introduzca otro Parent, simplemente cree otro <ul> si es una sola unidad, y anexe su resultado al padre<ul>.

Tenga en cuenta que la función que he utilizado anteriormente requiere un objeto jQuery para pasa como argumento, por lo que había necesidad de cambiar su manejador success:

success: function (xml) { 
    xmlParser($(xml)); 
}

Fuente

2012-09-29 16:41:02

Silva: The $ xml.contents() arroja un error :(Uncaught TypeError: Object # no tiene 'contenido' de métodos –

@harsha: Pase un objeto jQuery a la función, que esto, use 'success: function (xml) {xmlParser ($ (xml));} '. –

@Silva: gracias por toda la ayuda. Pero no puedo obtener la lista en el formato correcto. Lo que está sucediendo es que se crean listas individuales en lugar de una uno anidado. Estoy actualizando el último código aquí. ¿Puede echar un vistazo por favor? –

en primer lugar, cambiar la sintaxis success: xmlParser,

success: function(data){ 
    xmlParser(data) 
}

Fuente

2012-09-29 16:41:13

Nivel múltiple xml a la lista desordenada en jquery

Respuesta

Cuestiones relacionadas