Com crear una taula a partir d'una matriu d'objectes en JavaScript

En una pàgina web, les dades no alineades poden disminuir la llegibilitat i crear problemes per als espectadors. Per fer front a aquestes situacions, podeu utilitzar les taules per ordenar les dades d'una manera millor. Les taules ofereixen un format excel·lent per alinear les dades i millorar la llegibilitat i la visibilitat. Com que les taules es poden crear mitjançant el llenguatge de marcat d'hipertext (HTML), que es pot enllaçar amb JavaScript.

En aquesta entrada s'explicarà el procediment per formar una taula amb una matriu d'objectes en JavaScript.

Com crear una taula a partir d'una matriu d'objectes en JavaScript?

Per crear una taula a partir d'una matriu d'objectes, utilitzarem els mètodes següents:

Cadena de taula HTML
mètode map().

Explorem cada mètode un per un!

Mètode 1: creeu una taula a partir d'una matriu d'objectes utilitzant una cadena de taula HTML en JavaScript

A JavaScript, el propòsit d'un ' corda ” és emmagatzemar text, números o símbols especials. Les cadenes es defineixen tancant un caràcter o grup de caràcters entre cometes dobles o simples. Més concretament, també s'utilitzen per crear taules.

Prenguem un exemple per obtenir un concepte clar sobre la creació d'una taula a partir d'una matriu d'objectes utilitzant la cadena de taula.

Exemple

En el nostre exemple, utilitzarem un '

'etiqueta amb un identificador' contenidor ” i col·loqueu-lo dins de l'etiqueta del nostre fitxer HTML:

< id div = 'contenidor' > div >

Declarem un ' matriu ” i assigneu-li alguns valors:

era matriu = [ 'Senyal' , 'Pardal' , 'Peix' , 'Taronja' ] ;

Inicialitzar una variable ' Taula ” per emmagatzemar la cadena de la taula HTML:

var Taula = '' ;

Especifiqueu les dues cel·les per fila establint el valor ' 2 ' del ' cèl · lules ” variable:

cada cèl·lula = 2 ;

A continuació, utilitzeu ' array.for Each() ” per passar cada element de matriu de la funció. A continuació, configureu el ' {valor} 'amb un identificador' $ ' dins de ' ' etiqueta. A continuació, declara una variable ' a ' per afegir per augmentar l'índex ' i ”, i especifiqueu un “ si ” condició de tal manera que si la resta de valors de cel·les i la variable creada és igual a zero i el valor “ a ” no té la mateixa longitud de la matriu i, a continuació, trenca a la següent línia o fila de la taula:

matriu. per Cadascú ( ( valor, i ) => {
Taula += ` < TD > $ { valor } TD > ` ;
hi ha un = i + 1 ;
si ( a % cèl · lules == 0 && a != matriu. llargada ) {
Taula += '' ;
} } ) ;

Assigna les etiquetes de tancament de la taula a la variable ' Taula ' utilitzant el ' += ” operador. A continuació, enllaceu el contingut de la taula al contenidor creat mitjançant el seu contenidor. Per a això, utilitzeu el ' menyspreu () ” i passeu-li l'identificador i col·loqueu l'HTML intern per establir els valors dins de la variable Taula:

Taula += '' ;

document. menyspreu ( 'contenidor' ) . interior HTML = Taula ;

Al nostre fitxer CSS , aplicarem algunes propietats a la taula i les seves cel·les de dades. Per fer-ho, establirem el ' frontera 'propietat amb el valor' 1px sòlid ” per establir la vora al voltant de la taula i les seves cel·les i el “ farciment 'propietat amb el valor' 3 píxels ” per generar l'espai definit al voltant del contingut de l'element, segons la vora definida:

taula, TD {

frontera : 1px sòlid ;

farciment : 3 píxels ;

}

Deseu el codi donat, obriu el fitxer HTML i visualitzeu la taula dels objectes d'una matriu:

Explorem un mètode més per crear una taula a partir d'una matriu d'objectes en JavaScript.

Mètode 2: crear una taula a partir d'una matriu d'objectes utilitzant el mètode map() a JavaScript

El ' mapa () ” aplica una funció específica a cada element de la matriu i, a canvi, proporciona una nova matriu. Tanmateix, aquest mètode no fa cap substitució a la matriu original. També podeu utilitzar el mètode map() per formar una taula amb una matriu d'objectes.

Exemple

Creem una matriu utilitzant el ' deixar ” paraula clau. Assigna alguns valors a les propietats o claus de l'objecte:

deixar array = [
{ 'Nom' : 'Senyal' , 'Edat' : 'Vint (20)' } ,
{ 'Nom' : 'Què jo' , 'Edat' : 'Trenta (30)' } ]

Accediu al contenidor ja creat mitjançant el mètode belitlement () i utilitzeu ' insertAdjacentHTML() ” mètode per afegir les etiquetes de la taula:

document. menyspreu ( 'contenidor' ) . inseriu HTML adjacent ( 'després' ,

` < taula >< tr >< th >

Utilitzar el ' Object.keys() ” per accedir a les claus de l'objecte definit i després utilitzar el “ uneix-te () ” per col·locar-los com a encapçalaments dins del “ ' etiqueta:

$ { Objecte . claus ( matriu [ 0 ] ) . uneix-te ( '' ) }

Després d'afegir l'etiqueta de tancament del capçal de la taula i la fila de la taula i l'etiqueta d'obertura de dades, utilitzarem el ' mapa () ” mètode per anomenar “ Object.values() ” funció del mètode per a cada valor de les claus d'objecte i, a continuació, utilitzeu el “ uneix-te () ” mètode per col·locar-los dins d'una fila i passar a la següent:

th >< tr >< TD > $ { matriu. mapa ( i => Objecte . valors ( i )

. uneix-te ( '' ) ) . uneix-te ( '' ) } taula > ` )

Com podeu veure, hem creat correctament la taula a partir de la matriu d'objectes definida:

Hem tractat les maneres eficients de crear una taula a partir d'una matriu d'objectes en JavaScript.

Conclusió

A JavaScript, per a la formació d'una taula a partir d'una matriu d'objectes, l'HTML ' taula 'cadena o ' mapa () Es pot utilitzar el mètode. Per fer-ho, especifiqueu una etiqueta div amb un identificador. A continuació, declareu la matriu d'objectes en ambdós mètodes, emmagatzemeu etiquetes de taula dins de variables o retorneu-les directament a un element HTML connectat amb dades. En aquesta publicació s'ha parlat del mètode per crear una taula a partir d'una matriu d'objectes utilitzant JavaScript.

Com crear una taula a partir d'una matriu d'objectes en JavaScript