In diesem Beitrag wird das Verfahren zum Erstellen einer Tabelle mit einem Array von Objekten in JavaScript erläutert.
Wie erstelle ich eine Tabelle aus einem Array von Objekten in JavaScript?
Um eine Tabelle aus einem Array von Objekten zu erstellen, verwenden wir die folgenden Methoden:
Lassen Sie uns jede Methode einzeln untersuchen!
Methode 1: Erstellen Sie eine Tabelle aus einem Array von Objekten mithilfe einer HTML-Tabellenzeichenfolge in JavaScript
In JavaScript ist der Zweck eines „ Schnur “ soll Text, Zahlen oder Sonderzeichen speichern. Zeichenfolgen werden definiert, indem ein Zeichen oder eine Gruppe von Zeichen in doppelte oder einfache Anführungszeichen gesetzt wird. Genauer gesagt werden sie auch zum Erstellen von Tabellen verwendet.
Nehmen wir ein Beispiel, um ein klares Konzept zum Erstellen einer Tabelle aus einem Array von Objekten mithilfe der Tabellenzeichenfolge zu erhalten.
Beispiel
In unserem Beispiel verwenden wir ein „ Lassen Sie uns ein ' Reihe “ und weist ihm einige Werte zu: Initialisiere eine Variable “ Tisch ” zum Speichern der HTML-Tabellenzeichenfolge: Geben Sie die zwei Zellen pro Zeile an, indem Sie den Wert „ zwei ' des ' Zellen ” Variable: Verwenden Sie als Nächstes das „ array.for Each() ”-Methode, um jedes Array-Element von der Funktion zu übergeben. Stellen Sie dann „ {Wert} „mit einer Kennung“ $ ' innerhalb der ' Weisen Sie die schließenden Tags der Tabelle der Variablen „ Tisch ' Verwendung der ' += ' Operator. Verknüpfen Sie dann den Inhalt der Tabelle mithilfe seines Containers mit dem erstellten Container. Verwenden Sie dazu die „ Herabsetzung() “-Methode und übergeben Sie die ID an sie und platzieren Sie den inneren HTML-Code, um die Werte in der Variablentabelle festzulegen: In unserer CSS-Datei , Wir werden einige Eigenschaften auf die Tabelle und ihre Datenzellen anwenden. Dazu setzen wir das „ Grenze „Eigenschaft mit dem Wert“ 1px solide “, um den Rahmen um die Tabelle und ihre Zellen festzulegen, und das „ Polsterung „Eigenschaft mit dem Wert“ 3px ” um den definierten Raum um den Elementinhalt herum zu erzeugen, entsprechend der definierten Grenze: Speichern Sie den angegebenen Code, öffnen Sie Ihre HTML-Datei und sehen Sie sich Ihre Tabelle mit den Objekten eines Arrays an: Lassen Sie uns eine weitere Methode zum Erstellen einer Tabelle aus einem Array von Objekten in JavaScript untersuchen. Das ' Karte() “-Methode wendet eine bestimmte Funktion auf jedes Element des Arrays an und stellt im Gegenzug ein neues Array bereit. Diese Methode nimmt jedoch keine Ersetzungen im ursprünglichen Array vor. Sie können auch die Methode map() verwenden, um eine Tabelle mit einem Array von Objekten zu erstellen. Lassen Sie uns ein Array mit dem „ Lassen ' Stichwort. Weisen Sie den Objekteigenschaften oder Schlüsseln einige Werte zu: Greifen Sie mit der Methode belittlement() auf den bereits erstellten Container zu und verwenden Sie „ insertAdjacentHTML() ”-Methode zum Hinzufügen der Tabellen-Tags: Verwenden Sie das „ Object.keys() “-Methode, um auf die Schlüssel des definierten Objekts zuzugreifen, und verwenden Sie dann die „ beitreten() “-Methode, um sie als Überschriften innerhalb der „ Nach dem Hinzufügen des schließenden Tags für den Tabellenkopf und der Tabellenzeile und des öffnenden Tags für Daten verwenden wir das „ Karte() ” Methode zum Aufrufen der „ Objekt.Werte() ”-Methodenfunktion für jeden Wert der Objektschlüssel, dann verwenden Sie die “ beitreten() ”-Methode, um sie in einer Reihe zu platzieren und zur nächsten zu wechseln: Wie Sie sehen können, haben wir erfolgreich eine Tabelle aus dem definierten Array von Objekten erstellt: Wir haben die effizienten Möglichkeiten zum Erstellen einer Tabelle aus einem Array von Objekten in JavaScript behandelt. In JavaScript wird zur Bildung einer Tabelle aus einem Array von Objekten das HTML „ Tisch ” Zeichenkette oder “ Karte() “-Methode verwendet werden. Geben Sie dazu ein div-Tag mit einer ID an. Deklarieren Sie dann das Array von Objekten in beiden Methoden, speichern Sie Tabellen-Tags in Variablen oder geben Sie sie direkt an ein verbundenes HTML-Element mit Daten zurück. In diesem Beitrag wurde die Methode zum Erstellen einer Tabelle aus einem Array von Objekten mit JavaScript besprochen.
war Anordnung = [ 'Markieren' , 'Spatz' , 'Fische' , 'Orange' ] ;
' ; ' ;
' Schild. Deklarieren Sie als Nächstes eine Variable „ a ” hinzufügen um den Index zu erhöhen “ ich “ und geben Sie ein „ wenn ” Bedingung so, dass, wenn der Rest der Zellenwerte und die erstellte Variable gleich Null ist und der Wert “ a ” ist nicht gleich der Länge des Arrays, dann brechen Sie in die nächste Zeile oder Zeile der Tabelle um: Reihe. zum Jeder ( ( Wert, d ) => {
Tisch += ` < TD > $ { Wert } TD > ` ;
da ist ein = ich + 1 ;
wenn ( a % Zellen == 0 && a != Reihe. Länge ) {
Tisch += '' ;
} } ) ;
dokumentieren. Herabsetzung ( 'Container' ) . innere HTML = Tisch ;
Grenze : 1px solide ;
Polsterung : 3px ;
}
Methode 2: Erstellen Sie eine Tabelle aus einem Array von Objekten mit der Methode map() in JavaScript
Beispiel
{ 'Name' : 'Markieren' , 'Das Alter' : 'Zwanzig (20)' } ,
{ 'Name' : 'Was ich' , 'Das Alter' : 'Dreißig (30)' } ]
` < Tisch >< tr >< th >
' Schild: $ { Objekt . Schlüssel ( Reihe [ 0 ] ) . beitreten ( ' ' ) }
. beitreten ( '' ) ) . beitreten ( ' ' ) } Tisch > ` )
Fazit