Mostrar lista multidimensional en Javascript

En ciertas ocasiones podemos tener listas en las cuales no conocemos la cantidad de niveles que tienen las mismas. Por ejemplo en un árbol genealógico hay personas que pueden tener hijos, y esos hijos también pueden tener más hijos, y así se creará un juego de nodos que se irá expandiendo de arriba hacia abajo, sin saber su límite.

Cuando conocemos la cantidad de niveles es muy fácil, por ejemplo una categoría puede tener categorías hijos y ahí termina la cosa. Si en cambio estas categorías hijas pueden tener más categorías dentro suyo y así, sin saber la cantidad de dimensiones de la lista, debemos recurrir a otro tipo de soluciones.

Recursividad

Aunque esto no es un recurso muy utilizado en programación, es importante tenerlo presente, ya que en ciertas ocasiones puede ayudarnos a resolver problemas, como éste. La recursividad simplemente es una función, método o procedimiento que va a llamarse a sí mismo.

function miFuncion(parametro){

   miFuncion(parametro);

}

En cada llamada los parámetros probablemente sean diferentes de donde se está llamando.

Por ejemplo, supongamos que tenemos una lista con este aspecto:

var categorias = [
   {nombre: 'Deportes', url: '#deportes', sub: [ 
      {nombre: 'Fútbol', url: '#futbol', sub: [
         {nombre: 'Lionel Messi', url: '#messi', sub: []},
         {nombre: 'Cristiano Ronaldo', url: '#cristiano_ronaldo', sub: []}, 
         {nombre: 'Neymar', url: '#neymar', sub: []},
         {nombre: 'James Rodríguez', url: '#james_rodriguez', sub: []},
         {nombre: 'Alexis Sánchez', url: '#alexis_sanchez', sub: []}, 
         {nombre: 'Paolo Guerrero', url: '#paolo_guerrero', sub: []}, 
         {nombre: 'Luis Suárez', url: '#luis_suarez', sub: []} ]}, 
      {nombre: 'Tenis', url: 'tenis', sub: [
         {nombre: 'Roger Federer', url: '#roger_federer', sub: []},
         {nombre: 'Rafael Nadal', url: '#rafael_nadal', sub: []} 
      ]} 
   ]},
   {nombre: 'Economía', url: '#economia', sub: [
      {nombre: 'Peso', url: '#peso', sub: []},
      {nombre: 'Dólar', url: '#dolar', sub: []},
      {nombre: 'Euro', url: '#euro', sub: []} 
   ]},
   {nombre: 'Política', url: '#politica', sub: [
      {nombre: 'Argentina', url: '#argentina', sub: [ 
         {nombre: 'Cristina Kirchner', url: '#cfk', sub: []}, 
         {nombre: 'Mauricio Macri', url: '#macri', sub: []}
      ]}
   ]}
];

Cada elemento, o cada categoría tiene las mismas propiedades: nombre, url y sub. Las primeras son simplemente textos, la última es un array que puede contener elementos con la misma estructura. Entonces podemos tener una categoría ‘Deportes’ con una sub categoría ‘Tenis’ y dentro otra más llamada ‘Roger Federer’. Y así seguir agregando más hijos a cada elemento.

Lo primero que vamos a hacer es agregar la librería de Jquery, ya que la forma de crear los nodos estarán basados en esta librería:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Agregamos un div vacío:

<div> 
   <h1> Categorias </h1> 
   <div id="categorias"> </div> 
</div>

Dentro de ‘categorias’ vamos a insertar una lista. Entonces creamos la siguiente función:

function dibujarCategorias(p_categorias){
   var ul = $('<ul></ul>');
   for(var i = 0; i < p_categorias.length; i++){
      var li = $('<li></li>'); 
      var span = $('<span> ' + p_categorias[i].nombre + ' </span>');
      li.append(span);
      if(p_categorias[i].sub.length > 0){ 
         li.append(dibujarCategorias(p_categorias[i].sub)); 
      } 
      ul.append(li); 
   }
   return ul; 
}

La función creará un elemento de tipo ul, que dentro suyo tendrá elementos li con las categorías que encuentre. Sin embargo al encontrar categorías con más elementos adentro, se llamará a si misma con el nuevo elemento:

if(p_categorias[i].sub.length > 0){ 
   li.append(dibujarCategorias(p_categorias[i].sub)); 
}

Finalmente insertamos todo el código html multidimensión dentro del div vacío, llamado ‘categorias’:

$("#categorias").html(dibujarCategorias(categorias));

Descargar ejemplo

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    *