¿Te gustaría JavaScript desde cero?
Tenemos los diplomados que necesitas. ¡Haz clic aquí!
En este artículo, veremos cómo convertir una matriz en listas anidadas en HTML. Esto puede ser útil para mostrar datos de una manera jerárquica, como en un árbol o una tabla.
¿Qué es una matriz?
Una matriz es una estructura de datos que almacena datos en forma de filas y columnas. Cada fila de la matriz representa un registro, y cada columna representa un campo.
¿Qué son las listas anidadas?
Una lista anidada es una lista que contiene otras listas dentro de ella. Esto permite crear estructuras de datos jerárquicas.
Cómo convertir una matriz en listas anidadas en HTML
Hay dos formas principales de convertir una matriz en listas anidadas en HTML.
Método 1: Usar la etiqueta ul
El primer método es usar la etiqueta ul para crear una lista no ordenada. Dentro de la etiqueta ul, podemos usar la etiqueta li para crear cada elemento de la lista.
Para convertir una matriz en listas anidadas usando este método, podemos usar un bucle for para iterar sobre la matriz. En cada iteración del bucle, podemos crear una nueva lista anidada para cada elemento de la matriz.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Convertir matriz en listas anidadas</title>
</head>
<body>
<h1>Convertir matriz en listas anidadas</h1>
<script>
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (const row of matrix) {
const list = document.createElement('ul');
for (const item of row) {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
}
document.body.appendChild(list);
}
</script>
</body>
</html>Este código producirá el siguiente resultado:
1
2
3
4
5
6
7
8
9
Método 2: Usar la etiqueta div
El segundo método es usar la etiqueta div para crear un contenedor para cada elemento de la matriz. Dentro del contenedor, podemos usar la etiqueta ul para crear una lista no ordenada con los elementos de la matriz.
Para convertir una matriz en listas anidadas usando este método, podemos usar un bucle for para iterar sobre la matriz. En cada iteración del bucle, podemos crear un nuevo contenedor para cada elemento de la matriz.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Convertir matriz en listas anidadas</title>
</head>
<body>
<h1>Convertir matriz en listas anidadas</h1>
<script>
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (const row of matrix) {
const div = document.createElement('div');
for (const item of row) {
const ul = document.createElement('ul');
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
div.appendChild(ul);
}
document.body.appendChild(div);
}
</script>
</body>
</html>
Este código producirá el mismo resultado que el método anterior.
Te invitamos a ver todos los artículos que tenemos para ti, coméntanos que tal te pareció este artículo y compártelo con más personas.
¿Te gustaría JavaScript desde cero?
Tenemos los diplomados que necesitas. ¡Haz clic aquí!
