1

CONTEXTO RÁPIDO

Tengo una librería WYSIWYG o editor de texto, contiene la opción de crear un lista que genera items, también tiene la posibilidad de generar subitems, esto me devuelve un objeto de array con el contenido del items de la lista y los posibles subitems de la siguiente manera:

{
 items: [
  {
    content: 'Lorem Ipsum1',
    items: []
  },
  {
    content: 'Lorem Ipsum2',
    items: [{...}, {...}] // subitems
  },
  {
    content: 'Lorem Ipsum3',
    items: [] 
  }
 ]
}

En HTML compilado se vería así:

 1. Lorem Ipsum1

 2. Lorem Ipsum2
   2.1. Lorem Ipsum2.1
   2.2. Lorem Ipsum2.2

 3. Lorem Ipsum3

Mi pregunta es:

¿Cómo puedo recorrer todo esto teniendo en cuenta que pueden haber infinitos subitems?

Lo que ya tengo:

convertedHtml += "<ol>";

items.forEach(function(li) {
  convertedHtml += `<li>${li.content}</li>`; // Items primarios de la lista
});

convertedHtml += "</ol>";

2 respuestas 2

1

Prueba con esto, viene a ser lo mismo que ya tienes pero de forma recursiva:

var convertedHtml = ''

function recursiva(items) {
  convertedHtml += "<ol>";

  items.forEach(function(li) {
    convertedHtml += `<li>${li.content}</li>`;
    if (li.items.length > 0) {
      recursiva(li.items);
    }
  });

  convertedHtml += "</ol>";
  return convertedHtml;
}

salida.innerHTML = recursiva(items.items)

Ejemplo:

items = {
  items: [{
      content: 'Lorem Ipsum1',
      items: []
    },
    {
      content: 'Lorem Ipsum2',
      items: [{
          content: 'Lorem Ipsum3',
          items: []
        },
        {
          content: 'Lorem Ipsum4',
          items: [{
              content: 'Lorem Ipsum5',
              items: [{
                  content: 'Lorem Ipsum6',
                  items: []
                },
                {
                  content: 'Lorem Ipsum7',
                  items: [{
                      content: 'Lorem Ipsum8',
                      items: []
                    },
                    {
                      content: 'Lorem Ipsum9',
                      items: [{
                          content: 'Lorem Ipsum10',
                          items: []
                        },
                        {
                          content: 'Lorem Ipsum11',
                          items: []
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              content: 'Lorem Ipsum12',
              items: []
            }
          ]
        }
      ]
    },
    {
      content: 'Lorem Ipsum13',
      items: []
    }
  ]
}
var convertedHtml = ''

function recursiva(items) {
  convertedHtml += "<ol>";

  items.forEach(function(li) {
    convertedHtml += `<li>${li.content}</li>`;
    if (li.items.length > 0) {
      recursiva(li.items);
    }
  });

  convertedHtml += "</ol>";
  return convertedHtml;
}

salida.innerHTML = recursiva(items.items)
<div id="salida">

</div>

1
  • ¡Tu respuesta fue bastante completa, de verdad muchas gracias por el nuevo concepto que aprendo hoy! "Recursividad". Había llegado a la solución con una de las sugerencias relacionadas que habían en la parte derecha pero estaba en PHP. el 4 jul. 2022 a las 18:22
0

espero esto te sirva:

      items.forEach(function(perm, index) {
         var contenido = perm.content
       }

con este foreach yo recorro arrays compuestos en un proyecto que tengo, ojalá sirva para adaptarlo a tu codigo.

1
  • Gracias por la respuesta, pero sólo realizaste un forEach. Lo que no he podido lograr es recorrer los posibles infinitos subitems porque dentro de un subitem pueden haber más subitems. el 4 jul. 2022 a las 17:08

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.