Home / Questions / 69635
Accepted
bypabloc_
Asked: 2020-05-13 16:38:31 +0800 CST 2020-05-13 16:38:31 +0800 CST

How do I create <ul> and <li> with a recursive function?

  • 772

In the example I put a jsontest along with the code that I have.

I only generate libut I can't find the way to generate ul.

var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true
      }
    ]
  }
];

html=listado(arrayjson);
document.getElementById("listado").innerHTML=html;

function listado(array, l) {
  if ( l == undefined)
    l=0, html="";

  for (n in array) {
    html += "<li>"+array[n].nombre+"</li>\n";
    if (array[n].array) {
      listado(array[n].array, l+1);
    };
  };

  return html;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
----------------- lista generada por la funcion -----------------
<div id="listado"></div>
----------------- lista que espero obtener de la funcion -----------------
<div>
  <li>Electrica
    <ul>
      <li>Termico</li>
      <li>Relé</li>
      <li>Contactores</li>
    </ul>
  </li>
  <li>Mecanica
    <ul>
      <li>Motores</li>
    </ul>
  </li>
  <li>Sellos
  </li>
  <li>Filtro
    <ul>
      <li>Filtro 0,22 U</li>
      <li>Filtro Aceite</li>
      <li>Filtro De Agua</li>
    </ul>
  </li>
  <li>Sensores
  </li>
  <li>Croche
    <ul>
      <li>Ajustar</li>
      <li>Desajustar</li>
    </ul>
  </li>
  <li>Picos
    <ul>
      <li>Sujeción</li>
      <li>Formacion</li>
      <li>Altura</li>
    </ul>
  </li>
</div>

I want to create uland lito show/hide children, trying to mimic the following list: ready

javascript

2 Answers

  1. This is what you need:

    I've added some extra elements to the last element of your JSON, to check that the recursive function does its job correctly:

    What it does is build the list for each element it finds, and if more than 4 elements are found (when the fifth "array" element exists), then it calls itself again to build another child list.

    function recursiva(arreglo){
	for(var j=0; j<Object.keys(arreglo).length; j++){
		lista+="<ul>";
		lista+="<li>"+arreglo[j].id+"</li>";
		lista+="<li>"+arreglo[j].nombre+"</li>";
		lista+="<li>"+arreglo[j].id_padre+"</li>";
		lista+="<li>"+arreglo[j].status+"</li>";
		if(Object.keys(arreglo[j]).length > 4){
			recursiva(arreglo[j].array);
		}
		lista+="</ul>";
	}
}

var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true,
        "array":[
        {
        	"id": 23,
	        "nombre": "Tengo",
	        "id_padre": 22,
	        "status": true,
	        "array":[
	        {
	        	"id": 24,
		        "nombre": "Muchas",
		        "id_padre": 23,
		        "status": true,
		        "array":[
		        {
		        	"id": 25,
			        "nombre": "Dimensiones",
			        "id_padre": 24,
			        "status": true
		        }
		        ]
	        }
	        ]
        }
        ]
      }
    ]
  }
];

var lista = "";

window.onload=function(){
	recursiva(arrayjson);
	document.getElementById("listado").innerHTML=lista;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="listado"></div>

    I hope I've helped. I am attentive to any doubt.

    • 1
  2. Best Answer

    Here I leave you an example that allows you to create a drop- down list using the HTML <ul>...<li> tags based on the JSON that you show, it also includes a routine to show or hide the sub-levels of the list , for this I use jQuery and a bit of CSS and JavaScript .

    var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true
      }
    ]
  }
];

// Genera el Menu Tipo Lista:
html=menuList(arrayjson);

// Agrega el Menu Tipo Lista al DOM (usando jQuery):
$("#listado").html(html)

// agrega la clase "dropList" al Menu Tipo Lista:
.find("ul:first").addClass("dropList");

// crea la Lista Desplegable basado en la clase "dropList":
dropList();

// rutina para crear el Menú Tipo Lista (usando recursividad) 
function menuList(menu, l) {
 if ( l == undefined)
  l=0;
  
 var sp = " ".repeat(l*2);
 html = sp + "<ul>\n"
 
 for (n in menu) {
  html += sp+" <li>"+menu[n].nombre;
  if (menu[n].array) {
   html += "\n"+menuList(menu[n].array, l+1, html)+sp+" ";
  };
  html += "</li>\n";
 }
 html += sp + "</ul>\n"
 return html;
}

// rutina para crear la Lista Desplegable (usando jQuery) 
function dropList() {
 $('.dropList').find('li:has(ul)') 
  .addClass('collapse')
  .click( function(e) {
   if (this == e.target) {
    $(this).toggleClass('expand');
    $(this).children('ul').toggle();
    e.stopPropagation();
   }
  })
  .children('ul').hide();
};
    .dropList li {
 list-style: none;
 cursor: default;
 padding-left:20px;
 text-indent:-5px;
}
.dropList .collapse {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMTg0LjcsNDEzLjFsMi4xLTEuOGwxNTYuNS0xMzZjNS4zLTQuNiw4LjYtMTEuNSw4LjYtMTkuMmMwLTcuNy0zLjQtMTQuNi04LjYtMTkuMkwxODcuMSwxMDFsLTIuNi0yLjMgIEMxODIsOTcsMTc5LDk2LDE3NS44LDk2Yy04LjcsMC0xNS44LDcuNC0xNS44LDE2LjZoMHYyODYuOGgwYzAsOS4yLDcuMSwxNi42LDE1LjgsMTYuNkMxNzkuMSw0MTYsMTgyLjIsNDE0LjksMTg0LjcsNDEzLjF6Ii8+PC9zdmc+);
}
.dropList .expand {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=);
}
.dropList .collapse,
.dropList .expand {
 cursor: pointer;
 background-repeat: no-repeat;
 background-position: -3px 0px;
 background-size: 16px 16px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
----------------- lista generada por la funcion -----------------
<div id="listado"></div>
----------------- lista que espero obtener de la funcion -----------------
<div>
  <li>Electrica
    <ul>
      <li>Termico</li>
      <li>Relé</li>
      <li>Contactores</li>
    </ul>
  </li>
  <li>Mecanica
    <ul>
      <li>Motores</li>
    </ul>
  </li>
  <li>Sellos
  </li>
  <li>Filtro
    <ul>
      <li>Filtro 0,22 U</li>
      <li>Filtro Aceite</li>
      <li>Filtro De Agua</li>
    </ul>
  </li>
  <li>Sensores
  </li>
  <li>Croche
    <ul>
      <li>Ajustar</li>
      <li>Desajustar</li>
    </ul>
  </li>
  <li>Picos
    <ul>
      <li>Sujeción</li>
      <li>Formacion</li>
      <li>Altura</li>
    </ul>
  </li>
</div>

    • 1