Questo post spiegherà la procedura per formare una tabella con un array di oggetti in JavaScript.
Come creare una tabella da una matrice di oggetti in JavaScript?
Per creare una tabella da un array di oggetti, utilizzeremo i seguenti metodi:
Esploriamo ogni metodo uno per uno!
Metodo 1: creare una tabella da una matrice di oggetti utilizzando la stringa di tabella HTML in JavaScript
In JavaScript, lo scopo di un ' corda ” serve per memorizzare testo, numeri o simboli speciali. Le stringhe sono definite chiudendo un carattere o un gruppo di caratteri tra virgolette doppie o singole. Nello specifico, vengono utilizzati anche per la creazione di tabelle.
Facciamo un esempio per avere un'idea chiara sulla creazione di una tabella da un array di oggetti usando la stringa Table.
Esempio
Nel nostro esempio utilizzeremo un ' Dichiariamo un ' Vettore ” e assegnargli alcuni valori: Inizializza una variabile “ Tavolo ” per memorizzare la stringa della tabella HTML: Specificare le due celle per riga impostando il valore ' Due ” del “ cellule ” variabile: Quindi, usa il ' array.for Each() ” per passare ogni elemento dell'array dalla funzione. Quindi, imposta il ' {valore} ” con un identificatore “ $ ” all'interno del “ Assegna i tag di chiusura della tabella alla variabile “ Tavolo ' usando il ' += operatore. Quindi, collega il contenuto della tabella al contenitore creato utilizzando il relativo contenitore. Per questo, utilizzare il ' sminuire() ” e passagli l'id e posiziona l'HTML interno per impostare i valori all'interno della variabile Table: Nel nostro file CSS , applicheremo alcune proprietà alla tabella e alle sue celle di dati. Per fare ciò, imposteremo il ' confine ” proprietà con il valore “ 1px solido ” per impostare il bordo attorno alla tabella e alle sue celle e il “ imbottitura ” proprietà con il valore “ 3px ” per generare lo spazio definito attorno al contenuto dell'elemento, in base al bordo definito: Salva il codice dato, apri il tuo file HTML e visualizza la tua tabella degli oggetti di un array: Esploriamo un altro metodo per creare una tabella da un array di oggetti in JavaScript. Il ' carta geografica() ” applica una funzione specifica a ciascun elemento dell'array e, in cambio, fornisce un nuovo array. Tuttavia, questo metodo non effettua alcuna sostituzione nell'array originale. Puoi anche utilizzare il metodo map() per formare una tabella con un array di oggetti. Creiamo un array usando il ' permettere ' parola chiave. Assegna alcuni valori alle proprietà o alle chiavi dell'oggetto: Accedi al contenitore già creato utilizzando il metodo belittlement() e utilizza ' inserisciAdiacenteHTML() ” metodo per aggiungere i tag della tabella: Utilizzare il ' Chiavi.oggetto() ” per accedere alle chiavi dell'oggetto definito e quindi utilizzare il “ giuntura() ” per inserirli come intestazioni all'interno di “ ” tag: Dopo aver aggiunto il tag di chiusura dell'intestazione della tabella e la riga della tabella e il tag di apertura dei dati, utilizzeremo il ' carta geografica() ” metodo per chiamare il “ Object.values() ” funzione del metodo per ogni valore delle chiavi oggetto, quindi utilizzare il “ giuntura() ” per posizionarli all'interno di una riga e passare a quella successiva: Come puoi vedere, abbiamo creato correttamente la tabella dall'array di oggetti definito: Abbiamo illustrato i modi efficienti per creare una tabella da un array di oggetti in JavaScript. In JavaScript, per la formazione di una tabella da un array di oggetti, l'HTML “ tavolo ” stringa o “ carta geografica() ” può essere utilizzato. Per fare ciò, specifica un tag div con un id. Quindi, dichiarare l'array di oggetti in entrambi i metodi, memorizzare i tag della tabella all'interno delle variabili o restituirli direttamente a un elemento HTML connesso con i dati. Questo post ha discusso il metodo per creare una tabella da un array di oggetti usando JavaScript.
era matrice = [ 'Segno' , 'Passero' , 'Pesce' , 'Arancia' ] ;
' ;
” tag. Quindi, dichiara una variabile ' un ” aggiungere per incrementare l'indice “ io ”, e specificare un “ Se ” condizione in modo tale che se il resto dei valori delle celle e la variabile creata è uguale a zero e il valore “ un ” non è uguale alla lunghezza dell'array, quindi interrompi nella riga o riga successiva della tabella: Vettore. per A testa ( ( valore, i ) => {
Tavolo += ` < TD > $ { valore } TD > ` ;
c'è un = io + 1 ;
Se ( un % cellule == 0 && un != Vettore. lunghezza ) {
Tavolo += '' ;
} } ) ;
documento. sminuire ( 'contenitore' ) . interno HTML = Tavolo ;
confine : 1px solido ;
imbottitura : 3px ;
}
Metodo 2: creare una tabella da una matrice di oggetti utilizzando il metodo map() in JavaScript
Esempio
{ 'Nome' : 'Segno' , 'Età' : 'Venti (20)' } ,
{ 'Nome' : 'Che mi' , 'Età' : 'Trenta (30)' } ]
` < tavolo >< tr >< th >
' ) }
. giuntura ( '' ) ) . giuntura ( ' ' ) } tavolo > ` )
Conclusione