Muy buenos días caballeros, tengo una pequeña inquietud, estoy tratando de crear elementos < ul > de acuerdo a elementos padres de un JSON y a su hijos < li >, necesito acceder a todos los niveles interiores del objeto respetando la nomenclatura de que para los padres o listas superiores sera < ul > y para los hijos < li >
JSON con el que estoy trabajando
[
{
"ul":{
"id":1,
"uri":"App\\Http\\Controllers\\UserController",
"nombre":"UserController",
"nombre_controller":"UserController"
},
"li":[
{
"id":1,
"metodo":1,
"uri":"App\\Http\\Controllers\\UserController",
"nombre":"UserController",
"nombre_route":"users.create.view",
"nombre_menu":"users.create.view"
},
{
"id":2,
"metodo":1,
"uri":"App\\Http\\Controllers\\UserController",
"nombre":"UserController",
"nombre_route":"list.users.view",
"nombre_menu":"list.users.view"
}
]
},
{
"ul":{
"id":2,
"uri":"App\\Http\\Controllers\\PermissionController",
"nombre":"PermissionController",
"nombre_controller":"PermissionController"
},
"li":[
{
"id":6,
"metodo":1,
"uri":"App\\Http\\Controllers\\PermissionController",
"nombre":"PermissionController",
"nombre_route":"permission.create.view",
"nombre_menu":"permission.create.view"
},
{
"id":8,
"metodo":1,
"uri":"App\\Http\\Controllers\\PermissionController",
"nombre":"PermissionController",
"nombre_route":"view.permission.files",
"nombre_menu":"view.permission.files"
}
]
},
{
"ul":{
"id":3,
"uri":"App\\Http\\Controllers\\RipsController",
"nombre":"RipsController",
"nombre_controller":"RipsController"
},
"li":[
{
"id":10,
"metodo":1,
"uri":"App\\Http\\Controllers\\RipsController",
"nombre":"RipsController",
"nombre_route":"load.rips",
"nombre_menu":"load.rips"
}
]
}
]
Hasta el momento implemente el siguiente ciclo para recursivamente recorrerlo, pero esta funcionando solamente con los ul y los demás objetos li me los deja vacíos
introducir el código aquí
function example(data) {
const list = document.querySelector('#response');
for (var k in data) {
if (typeof data[k] == "object" && data[k] !== null){
if (data[k][k] === data[k]['ul']){
list.innerHTML += `id:<ul>${data[k]['id']} || metodo:${data[k]['uri']} || uri:${data[k]['nombre']} || nombre:${data[k]['nombre_controller']}</ul>`;
example(data[k]);
}else{
list.innerHTML += `id:<li>${data[k]['id']} || metodo:${data[k]['metodo']} || nombre_route:${data[k]['nombre_route']} || nombre_menu:${data[k]['nombre_menu']}</li>`;
example(data[k]);
}
}else{
}
// do something...
}
}
Nota: Aclaro que apenas estoy aprendiendo recursividad, aun no tengo la noción profunda de uso si tienen un ejemplo de un caso similar con objetos, como explicación me serviría bastante.
UL
dentro de elementosLI
por ejemplo, además los elementos LI quizás deberían estar DENTRO del UL, no al mismo nivel, creo que tu JSON no es el más adecuado. ¿ Se puede plantear en la respuesta una estructura diferente del JSON ? ¿ o es algo que viene dado. ?