En el ejemplo coloco un json
de prueba junto con el codigo que llevo.
Solo genero li
pero no encuentro la manera de como generar 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>
Quiero crear ul
y li
para mostrar/ocultar hijos, intentando imitar la siguiente lista:
json
multidimensional.