Come creare la tabella da una matrice di oggetti in JavaScript
Questo post spiegherà la procedura per formare una tabella con una serie di oggetti in JavaScript.
Come creare la tabella da una matrice di oggetti in JavaScript?
Per creare una tabella da una matrice di oggetti, useremo i seguenti metodi:
- String della tabella HTML
- Metodo mappa ()
Esploriamo ogni metodo uno per uno!
Metodo 1: creare tabella da un array di oggetti usando la stringa tabella HTML in JavaScript
In JavaScript, lo scopo di un "corda"È archiviare testo, numeri o simboli speciali. Le stringhe sono definite chiudendo un personaggio o un gruppo di caratteri in citazioni doppie o singole. Più specificamente, sono anche utilizzati per la creazione di tabelle.
Facciamo un esempio per ottenere un concetto chiaro sulla creazione di una tabella da una serie di oggetti usando la stringa della tabella.
Esempio
Nel nostro esempio, utilizzeremo un ""Tag con un ID"contenitore"E posizionalo all'interno del tag del nostro file HTML:
Dichiariamo un "vettore"E assegna alcuni valori ad esso:
var array = ["mark", "sparrow", "pesce", "arancione"];Inizializza una variabile "Tavolo"Per archiviare la stringa della tabella HTML:
var table = "| "Tag. Successivamente, dichiarare una variabile "UN"Per aggiungere per incrementare l'indice"io"E specifica un"Se"Condizione in modo tale che se il resto dei valori delle celle e la variabile creata è uguale a zero e valore"UN"Non è la lunghezza dell'array uguale, quindi interrompere la riga o la riga successiva della tabella: vettore.per ogni ((valore, i) => Tabella += ' | $ valore | ';
documento.Belittlement ("Container").HTML interiore = tabella;
Nel nostro file CSS, Applicheremo alcune proprietà alla tabella e alle sue celle di dati. Per farlo, imposteremo il "confine"Proprietà con il valore"1px solido"Per impostare il bordo attorno al tavolo, alle sue celle e al"imbottitura"Proprietà con il valore"3px"Per generare lo spazio definito attorno al contenuto dell'elemento, secondo il bordo definito:
Tabella, TDbordo: 1px solido;
imbottitura: 3px;
Salva il codice dato, apri il file HTML e visualizza la tabella degli oggetti di un array:
Esploriamo un altro metodo per la creazione di una tabella da una serie di oggetti in JavaScript.
Metodo 2: creare tabella da un array di oggetti usando il metodo Map () in JavaScript
IL "carta geografica()"Il metodo applica una funzione specifica per 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 una matrice di oggetti.
Esempio
Creiamo un array usando il "permettere" parola chiave. Assegna alcuni valori alle proprietà o ai tasti dell'oggetto:
Let Array = ["Nome": "Mark", "Age": "Twenty (20)",
"Nome": "Che mi", "Age": "Thirty (30)"]
Accedi al contenitore già creato utilizzando il metodo Belittlement () e utilizza "insertAdJacenthtml ()"Metodo per aggiungere i tag della tabella:
documento.Belittlement ("Container").insertAdjacenthtml ('Afterend','
| Usa il "Oggetto.tasti ()"Metodo per accedere alle chiavi dell'oggetto definito e quindi utilizzare il"giuntura()"Metodo per posizionarli come titoli all'interno del" Dopo aver aggiunto il tag di chiusura della testa della tabella e la riga della tabella e il tag di apertura dei dati, useremo il “carta geografica()Metodo "per chiamare il"Oggetto.valori()"Funzione metodo per ciascun valore dei tasti oggetto, quindi utilizza il"giuntura()"Metodo per metterli in fila e passare al prossimo: |
|---|
Come puoi vedere, abbiamo creato correttamente la tabella dall'array definito di oggetti:
Abbiamo coperto i modi efficienti per creare una tabella da una serie di oggetti in JavaScript.
Conclusione
In JavaScript, per la formazione di una tabella da una serie di oggetti, l'HTML "tavolo”Stringa o"carta geografica()"Il metodo può essere utilizzato. Per fare ciò, specificare un tag DIV con un ID. Quindi, dichiarare l'array di oggetti in entrambi i metodi, archiviare i tag della tabella all'interno delle variabili o restituirli direttamente a un elemento HTML collegato con dati. Questo post ha discusso del metodo per la creazione di una tabella da una serie di oggetti usando JavaScript.