Esta publicación explicará el procedimiento para formar una tabla con una matriz de objetos en JavaScript.
¿Cómo crear una 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:
¡Exploremos cada método uno por uno!
Método 1: crear una tabla a partir de una matriz de objetos usando una cadena de tabla HTML en JavaScript
En JavaScript, el propósito de un “ cuerda ” es para almacenar texto, números o símbolos especiales. Las cadenas se definen cerrando un carácter o grupo de caracteres entre comillas simples o dobles. Más específicamente, también se utilizan para crear tablas.
Tomemos un ejemplo para obtener un concepto claro sobre cómo crear una tabla a partir de una matriz de objetos usando la cadena Table.
Ejemplo
En nuestro ejemplo, utilizaremos un ' Declaremos un “ formación ” y asígnele algunos valores: Inicializar una variable “ Mesa ” para almacenar la cadena de la tabla HTML: Especifique las dos celdas por fila configurando el valor ' 2 ' del ' células ' variable: A continuación, utilice el ' array.para cada uno() ” para pasar cada elemento de la matriz de la función. Luego, configure el “ {valor} ” con un identificador “ $ ' dentro de ' ' etiqueta. A continuación, declare una variable “ a ” para agregar para 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 igual a la longitud de la matriz, luego se divide en la siguiente línea o fila de la tabla: Asigne las etiquetas de cierre de la tabla a la variable “ Mesa ' utilizando el ' += ” operador. Luego, vincule el contenido de la Tabla al contenedor creado utilizando su contenedor. Para eso, utilice el “ menosprecio () ” y pásele la identificación y coloque el HTML interno para establecer los valores dentro de la tabla variable: En nuestro archivo CSS , aplicaremos algunas propiedades a la tabla y sus celdas de datos. Para ello, configuraremos el “ borde ” propiedad con el valor “ 1px sólido ” para establecer el borde alrededor de la tabla y sus celdas y el “ relleno ” propiedad con el valor “ 3 píxeles ” para generar el espacio definido alrededor del contenido del elemento, de acuerdo con el borde definido: 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 matriz de objetos en JavaScript. Los ' 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 realiza ningún reemplazo en la matriz original. También puede utilizar el método map() para formar una tabla con una matriz de objetos. Vamos a crear una matriz usando el ' dejar ” palabra clave. Asigne algunos valores a las propiedades o claves del objeto: Acceda al contenedor ya creado utilizando el método de menosprecio () y utilice ' insertAdjacentHTML() ” método para agregar las etiquetas de la tabla: Utilizar el ' Objeto.claves() ” para acceder a las claves del objeto definido y luego usar el “ unirse() ” para colocarlos como encabezados dentro del “ Después de agregar la etiqueta de cierre del encabezado de la tabla y la fila de la 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 claves de objeto, luego utilice el “ unirse() ” para colocarlos dentro de una fila y pasar a la siguiente: Como puede ver, hemos creado con éxito una tabla a partir de la matriz definida de objetos: Hemos cubierto las formas eficientes de crear una tabla a partir de una matriz de objetos en JavaScript. En JavaScript, para la formación de una tabla a partir 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 variables o devuélvalas 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 usando JavaScript.
fue una matriz = [ 'Marca' , 'Gorrión' , 'Pez' , 'Naranja' ] ;
' ;
Mesa += ` < DT > $ { valor } DT > ` ;
hay un = i + 1 ;
si ( a % células == 0 && a != formación. longitud ) {
Mesa += '' ;
} } ) ;
documento. menosprecio ( 'envase' ) . interno HTML = Mesa ;
borde : 1px sólido ;
relleno : 3 píxeles ;
}
Método 2: crear una tabla a partir de una matriz de objetos usando el método map() en JavaScript
Ejemplo
{ 'Nombre' : 'Marca' , 'Años' : 'Veinte (20)' } ,
{ 'Nombre' : 'Por qué a mi' , 'Años' : 'Treinta (30)' } ]
` < mesa >< tr >< el >
' etiqueta: $ { Objeto . llaves ( formación [ 0 ] ) . unirse ( ' ' ) }
. unirse ( '' ) ) . unirse ( ' ' ) } mesa > ` )
Conclusión