Cómo crear tabla a partir de una matriz de objetos en JavaScript
Esta publicación explicará el procedimiento para formar una tabla con una variedad de objetos en JavaScript.
Cómo crear tabla a partir de una matriz de objetos en JavaScript?
Para crear una tabla a partir de una matriz de objetos, utilizaremos los siguientes métodos:
- Cadena de tabla HTML
- Método MAP ()
Exploremos cada método uno por uno!
Método 1: Crear tabla a partir de una matriz de objetos utilizando la cadena de tabla HTML en JavaScript
En JavaScript, el propósito de un "cadena"Es almacenar texto, números o símbolos especiales. Las cadenas se definen cerrando un personaje o grupo de caracteres en citas dobles o individuales. Más específicamente, también se utilizan para crear tablas.
Tomemos un ejemplo para obtener un concepto claro sobre la creación de una tabla a partir de una matriz de objetos usando la cadena de la tabla.
Ejemplo
En nuestro ejemplo, utilizaremos un ""Etiqueta con una identificación"envase"Y colóquelo dentro de la etiqueta de nuestro archivo HTML:
Declaremos un "formación"Y asignarle algunos valores:
var array = ["marca", "gorrión", "pez", "naranja"];Inicializar una variable "Mesa"Para almacenar la cadena de tabla HTML:
Tabla var = "| " etiqueta. A continuación, declare una variable "a"Para agregar a incrementar el índice"i", Y especifique un"si"Condición de tal manera que si el resto de los valores de las celdas y la variable creada es igual a cero y el valor"a"No es la longitud de la matriz igual, luego se rompa en la siguiente línea o fila de la tabla: formación.para cada ((valor, i) => Tabla += ' | $ valor | ';
documento.Belittlement ("contenedor").html interno = tabla;
En nuestro archivo CSS, Aplicaremos algunas propiedades a la tabla y sus celdas de datos. Para hacerlo, estableceremos el "borde"Propiedad con el valor"1px sólido"Para colocar el borde alrededor de la mesa y sus celdas y el"relleno"Propiedad con el valor"3px"Generar el espacio definido alrededor del contenido del elemento, de acuerdo con el borde definido:
tabla, TDborde: 1px sólido;
relleno: 3px;
Guarde el código dado, abra su archivo HTML y vea su tabla de objetos de una matriz:
Exploremos un método más para crear una tabla a partir de una variedad de objetos en JavaScript.
Método 2: Crear tabla a partir de una matriz de objetos utilizando el método MAP () en JavaScript
El "mapa()El método "aplica una función específica a cada elemento de la matriz, y a cambio, proporciona una nueva matriz. Sin embargo, este método no hace reemplazos en la matriz original. También puede utilizar el método map () para formar una tabla con una matriz de objetos.
Ejemplo
Creemos una matriz usando el "dejarPalabra clave. Asigne algunos valores a las propiedades o claves del objeto:
Deje matriz = ["Nombre": "Marca", "Age": "Veinte (20)",
"Nombre": "Che Mi", "Age": "Thirty (30)"]
Acceda al contenedor ya creado utilizando el método Belittlement () y utilice "insertadJacenthtml ()Método para agregar las etiquetas de la tabla:
documento.Belittlement ('contenedor').InsertAdJacenthtml ('AfterEd','
| Utilizar el "Objeto.llaves()"Método para acceder a las claves del objeto definido y luego usar el"unirse()"Método para colocarlos como encabezados dentro del" Después de agregar la etiqueta de cierre de la tabla de la tabla y la fila de tabla y la etiqueta de apertura de datos, usaremos el "mapa()"Método para llamar al"Objeto.valores()"Función de método para cada valor de las teclas de objeto, luego utilice el"unirse()Método para colocarlos dentro de una fila y pasar al siguiente: |
|---|
Como puede ver, hemos creado con éxito la tabla a partir de la matriz definida de objetos:
Hemos cubierto las formas eficientes de crear una tabla a partir de una variedad de objetos en JavaScript.
Conclusión
En JavaScript, para la formación de una tabla de una matriz de objetos, el HTML "mesa"Cadena o"mapa()Se puede utilizar el método ". Para hacerlo, especifique una etiqueta Div con una identificación. Luego, declare la matriz de objetos en ambos métodos, almacene etiquetas de tabla dentro de las variables o devuélvalos directamente a un elemento HTML conectado con datos. Esta publicación ha discutido el método para crear una tabla a partir de una matriz de objetos utilizando JavaScript.