1

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.

5
  • Recuerda que para entender la recursividad, es necesario que entiendas la recursividad...
    – Jakala
    el 6 mar. 2020 a las 14:42
  • Exacto amigo tengo la noción de que es el proceso en mente pero aun me faltan algunos detalles. el 6 mar. 2020 a las 14:45
  • No entiendo muy bien el ejemplo, ya que el contenido JSON no tiene una estructura jerárquica que precise recursividad. No veo elementos UL dentro de elementos LI 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. ?
    – Roberto
    el 6 mar. 2020 a las 16:07
  • No amigo no puedo cambiarlo porque ese JSON se esta generando desde un backend en php, y la tarea es consumirlo y generar un menú con dicha información. el 6 mar. 2020 a las 16:35
  • Si quieres puedes copiar el JSON descrito anteriormente y acomodarlo bien con esta herramienta para que lo observes mejor jsonformatter.curiousconcept.com el 6 mar. 2020 a las 16:36

1 respuesta 1

1

window.onload = ()=>{

    const listas = [
        {
           "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"
              }
           ]
        }
     ]

    const elementoPadre = document.body;

    function crearListaDinamicaRecursiva(elementoGeneral, listas){

        const informacionElementosUl = listas.map(lista => lista.hasOwnProperty("ul") ? lista["ul"] : false);
        const informacionElementosLi = listas.map(lista => lista.hasOwnProperty("li") ? lista["li"] : false);
        
        let nuevosElementosRecursivos = [];

        informacionElementosUl.forEach((ul, i)=>{

            let nuevoElementoUl = document.createElement("ul");

            informacionElementosLi[i].forEach((li) =>{

                let nuevoElementoLi = document.createElement("li");
                nuevoElementoUl.appendChild(nuevoElementoLi);

            });

            nuevosElementosRecursivos[i] = nuevoElementoUl;

        });

        nuevosElementosRecursivos.forEach((elementoUl)=>{
            elementoGeneral.appendChild(elementoUl);
        });

        return [nuevosElementosRecursivos, informacionElementosUl, informacionElementosLi];

    }

    console.log(crearListaDinamicaRecursiva(elementoPadre, listas));

}

Hola que tal?, cree ese código de ejemplo, pero me llevo mas tiempo de lo que pense... ya que me di cuenta que los arreglos no dejan almacenar elementos creados en tiempo real con document.createElement... esto me dio nauseas a la hora de mirar la recursividad, así que tuve que optar por no crear arreglos de elementos alfinal, ya que por alguna razón estos simplemente van a irrespetar el hecho de que le agruegemos hijos, (solamente se agrega un hijo) siempre.

sin embargo he de decir unas cuantas cosas, primero, esto código como tal funciona bien para el proposito (si es esto a lo que te referias), lo segundo es que no entiendo muy bien tu estructura... la idea de la recursividad usandola para agregar elementos es que los elementos padres sean padres de los elementos hijos en tu caso no es así, es decir:

{
           "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"
              }
           ]
        }

Tomando como ejemplo esa parte de ahí, podemos ver que li no esta dentro de ul, cosa que realmente hace mas dificil el determinar cuál es un elemento hijo y cuál no... en pocas palabras, tu arreglo de objetos dice que los elementos ul no son padres de los elementos li, cosa que no debería ser así, ya que los elementos li al ser hijos nativamente de los elementos ul, no tienen sentido colocarlos solos, por lo tanto te recomiendo que adaptes tu arreglo de objetos y la función para que cada elemento ul, contenga los elementos li.

Por otro lado, una explicación del código:

Tenemos la constante llamada elementoPadre que es igual a document.body:

const elementoPadre = document.body;

Esta nos sirve para determinar a que elemento queremos añadirle los elementos ul (las listas).

La función crearListaDinamicaRecursiva es la que se encarga de crear las listas recursivas y añadirlas al documento, esta a su vez nos retornara un arreglo de información que contendra información como el arreglo de elementos ul, la información de cada ul y la información de cada li según los datos que tenias en tu lista de objetos, ahora bien, en la función crearListaDinamicaRecursiva tenemos lo siguiente:

function crearListaDinamicaRecursiva(elementoGeneral, listas){

    /*
     Obtiene atravez de un mapeo de cada elemento del array los elementos ul
     que hayan en él si existe alguno, lo mismo para la otra constante.
    */
    const informacionElementosUl = listas.map(lista => lista.hasOwnProperty("ul") ? lista["ul"] : false);
    const informacionElementosLi = listas.map(lista => lista.hasOwnProperty("li") ? lista["li"] : false);

    //Arreglo donde guardaremos las listas resultado
    let nuevosElementosRecursivos = [];

    //Recorremos las listas existentes
    informacionElementosUl.forEach((ul, i)=>{

        //Creamos un nuevo elemento ul por cada lista
        let nuevoElementoUl = document.createElement("ul");

        //Recorremos cada información que tiene cada elemento li
        informacionElementosLi[i].forEach((li) =>{

            /*
             Creamos un nuevo elemento li y lo añadimos al final de
             nuevoElementoUl
            */
            let nuevoElementoLi = document.createElement("li");
            nuevoElementoUl.appendChild(nuevoElementoLi);

        });

        /*
         Asignamos al arreglo de listas resultado en la pocisión actual que
         se esta recorriendo la nueva lista con los elementos li necesarios
         añadidos.
        */
        nuevosElementosRecursivos[i] = nuevoElementoUl;

    });

    /*
     Recorremos el arreglo resultado lleno de listas y le añadimos cada
     elemento ul al elemento que especificamos que queriamos usar como
     contenedor, en este caso el elemento body de la pagina.
    */
    nuevosElementosRecursivos.forEach((elementoUl)=>{
        elementoGeneral.appendChild(elementoUl);
    });

    /*
     Ahora se retorna un arreglo con información valiosa resultado de ejecutar
     esta función.
    */
    return [nuevosElementosRecursivos, informacionElementosUl, informacionElementosLi];

}
1
  • Muchas gracias me sirvió mucho para arreglar unos cuantos errores que tenia en mi código. el 8 mar. 2020 a las 3:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.