How to Show Multidimensional List in Javascript

From WikiHTP

In certain occasions, we can have lists in which we do not know the number of levels they have. For example, in a family tree, there are people who can have children, and those children can also have more children, and this will create a set of nodes that will expand from top to bottom, without knowing their limitations.

When we know the number of levels is very easy, for example, a category can have child categories and that's where the thing ends. If, on the other hand, these daughter categories can have more categories within them and thus, without knowing the number of dimensions of the list, we must resort to other types of solutions.


Although this is not a widely used resource in programming, it is important to keep this in mind, since in certain occasions it can help us to solve problems, like this one. Recursion is simply a function, method or procedure that is going to call itself.

function myFunction (parameter) {

   myFunction (parameter);


In each call, the parameters are probably different from where you are calling.

For example, suppose we have a list with this aspect:

var categories = [ 
   {name: 'Sports', url: '#sports', sub: [ 
      {name: 'Football', url: '#football', sub: [
         {name: 'Lionel Messi', url: '#messi', sub: []},
         {name: 'Cristiano Ronaldo', url: '#cristiano_ronaldo', sub: []}, 
         {name: 'Neymar', url: '#neymar', sub: []},
         {name: 'James Rodríguez', url: '#james_rodriguez', sub: []},
         {name: 'Alexis Sánchez', url: '#alexis_sanchez', sub: []}, 
         {name: 'Paolo Guerrero', url: '#paolo_guerrero', sub: []}, 
         {name: 'Luis Suárez', url: '#luis_suarez', sub: []}]}, 
      {name: 'Tennis', url: 'tennis', sub: [
         {name: 'Roger Federer', url: '#roger_federer', sub: []},
         {name: 'Rafael Nadal', url: '#rafael_nadal', sub: []} 
   {name: 'Economy', url: '#economia', sub: [
      {name: 'Weight', url: '#weight', sub: []},
      {name: 'Dollar', url: '#dolar', sub: []},
      {name: 'Euro', url: '#euro', sub: []} 
   {name: 'Policy', url: '#politica', sub: [
      {name: 'Argentina', url: '#argentina', sub: [ 
         {name: 'Cristina Kirchner', url: '#cfk', sub: []}, 
         {name: 'Mauricio Macri', url: '#macri', sub: []}

Each element, or each category has the same properties: name , url and sub. The first ones are simply texts, the last one is an array that can contain elements with the same structure. Then we can have a category 'Sports' with a sub category 'Tennis' and another one called 'Roger Federer'. And so continue to add more children to each element.

The first thing we are going to do is add the Jquery library since the way to create the nodes will be based on this library:

<script type = "text / javascript" src = ""> </ script>

We add an empty div:

   <h1> Categories </ h1> 
   <div id = "categories"> </ div>  
</ div>

Within 'categories' we are going to insert a list. Then we create the following function:

function drawCategories (p_categories) {
   var ul = $ ('<ul> </ ul>');
   for (var i = 0; i <p_categories.length; i ++) {
      var li = $ ('<li> </ li>'); 
      var span = $ ('<span>' + p_categories [i] .name + '</ span>');
      li.append (span);
      if (p_categories [i] .sub.length> 0) { 
         li.append (drawCategories (p_categories [i] .sub)); 
      ul.append (li); 
   return ul; 

The function will create an element of type ul , which inside it will have elements li with the categories it finds. However, when finding categories with more elements inside, it will call itself with the new element:

if (p_categories [i] .sub.length> 0) { 
   li.append (drawCategories (p_categories [i] .sub)); 

Finally we insert all the multidimension html code inside the empty div, called 'categories':

$ ("# categories"). html (drawCategories (categories));

About This Tutorial

This page was last edited on 31 January 2019, at 19:50.