So erstellen Sie Tabelle aus einem Array von Objekten in JavaScript aus

Jean Dengler

Auf einer Webseite können nicht ausgerichtete Daten die Lesbarkeit verringern und Probleme für die Zuschauer verursachen. Um solche Situationen anzugehen, können Sie die Tabellen verwenden, um Daten besser zu sortieren. Tabellen bieten ein großartiges Format, um Daten auszurichten und die Lesbarkeit und Sichtbarkeit zu verbessern. Da können Tabellen mithilfe der Hypertext Markup Language (HTML) erstellt werden, die mit JavaScript verknüpft werden kann.

In diesem Beitrag wird das Verfahren erläutert, um eine Tabelle mit einem Array von Objekten in JavaScript zu bilden.

So erstellen Sie Tabelle aus einem Array von Objekten in JavaScript aus?

Um eine Tabelle aus einer Reihe von Objekten zu erstellen, verwenden wir die folgenden Methoden:

HTML -Tabellenzeichenfolge
MAP () Methode

Erforschen wir jede Methode eins nach dem anderen!

Methode 1: Erstellen Sie die Tabelle aus einem Array von Objekten mithilfe der HTML -Tabellenzeichenfolge in JavaScript

In JavaScript der Zweck eines “Saite”Ist, Text, Zahlen oder spezielle Symbole zu speichern. Saiten werden definiert, indem ein Zeichen oder eine Gruppe von Zeichen in doppelten oder einzelnen Zitaten geschlossen wird. Insbesondere 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 mit der Tabellenzeichenfolge zu erhalten.

Beispiel

In unserem Beispiel werden wir eine „verwenden“"Tag mit einer ID"Container”Und legen Sie es in das Tag unserer HTML -Datei:

Lassen Sie uns eine "deklarieren"Array”Und weisen Sie ihm einige Werte zu:

var array = ["mark", "sparrow", "fish", "orange"];

Eine Variable initialisieren “TischSo speichern Sie die HTML -Tabellenzeichenfolge:

var table = "";

Geben Sie die beiden Zellen pro Zeile an, indem Sie den Wert festlegen2" des "Zellen”Variable:

var cells = 2;

Verwenden Sie als nächstes die “Array.für jede()Methode, um jedes Array -Element aus der Funktion zu übergeben. Dann setzen Sie die “Wert"Mit einer Kennung"$" innerhalb der "

';
var a = i + 1;
if (a%cells == 0 && a!= Array.Länge)
Tabelle += "";
);
Weisen Sie der Variablen die Tabellenschließetags zu “Tisch" Verwendung der "+=" Operator. Verknüpfen Sie dann den Inhalt der Tabelle mit dem Container mit dem erstellten Container mit dem Container. Dafür nutzen Sie die “Herabsetzung()Methode und übergeben Sie die ID an sie und platzieren Sie das innere HTML, um die Werte in der variablen Tabelle festzulegen:
Tabelle += "

" Schild. Als nächstes deklarieren Sie eine Variable “A"Um den Index zu erhöhen"ich"Und geben Sie eine an"Wenn"Bedingung so, dass, wenn der Rest der Zellenwerte und die erstellte Variable gleich Null und Wert sindA”Ist keine gleiche Länge des Arrays und brechen Sie dann in die nächste Zeile oder Zeile der Tabelle ein:

Array.für jeden ((Wert, i) =>
Tabelle += '

$ value

";
dokumentieren.Herabsetzung ("Container").innere HTML = Tabelle;
In unserer CSS -Datei, Wir werden einige Eigenschaften auf die Tabelle und ihre Datenzellen anwenden. Um dies zu tun, werden wir die "festlegen"Grenze”Eigenschaft mit dem Wert“1px fest"Um den Rand um den Tisch und seine Zellen und die" zu setzen "Polsterung”Eigenschaft mit dem Wert“3pxUm den definierten Raum um den Elementinhalt zu erzeugen, gemäß der definierten Grenze:
Tabelle, td
Grenze: 1px fest;
Polsterung: 3px;

Speichern Sie den angegebenen Code, öffnen Sie Ihre HTML -Datei und sehen Sie sich Ihre Tabelle der Objekte eines Arrays an:

Lassen Sie uns eine weitere Methode zum Erstellen einer Tabelle aus einem Array von Objekten in JavaScript untersuchen.

Methode 2: Erstellen Sie die Tabelle aus einem Array von Objekten mit der MAP () -Methode in JavaScript aus

Der "Karte()Die Methode wendet eine bestimmte Funktion auf jedes Element des Arrays an und bietet im Gegenzug ein neues Array. Diese Methode ersetzt jedoch keine Ersetzungen im ursprünglichen Array. Sie können auch die Methode map () verwenden, um eine Tabelle mit einem Array von Objekten zu bilden.

Beispiel

Erstellen wir ein Array mit dem "lassen" Stichwort. Weisen Sie den Objekteigenschaften oder -tasten einige Werte zu:
lass Array = [
"Name": "Mark", "Alter": "Twenty (20)",
"Name": "Che Mi", "Alter": "Dreißig (30)"]
Greifen Sie auf den bereits erstellten Container zu, indem Sie die Methode herabführlich () verwenden und verwenden “InsertAdjacentHtml ()Methode zum Hinzufügen der Tabellen -Tags:
dokumentieren.Herabsetzung ('Container').InsertAdjacenthtml ('Afterend',
''

Verwenden Sie die “Objekt.Schlüssel()Methode, um auf die Schlüssel des definierten Objekts zuzugreifen und dann die “zu verwenden“verbinden()Methode, um sie als Überschriften innerhalb der "zu platzieren"
" Schild:
$ Objekt.Schlüssel (Array [0]).verbinden(' ')
Nach dem Hinzufügen des TABEL -TAGS -TAGS- und TABLE -Zeilen- und Datenöffnungs -Tags des Tabellenkopfes verwenden wir die “Karte()”Methode zum Aufrufen der“Objekt.Werte()Methodenfunktion für jeden Wert der Objekttasten und verwenden Sie dann die “verbinden()Methode, um sie innerhalb einer Reihe zu platzieren und zum nächsten zu wechseln:

$ Array.Karte (e => Objekt.Werte (e)
.verbinden(' ')).verbinden('
')
'))
Wie Sie sehen können, haben wir eine erfolgreichere Tabelle aus dem definierten Array von Objekten erstellt:

Wir haben die effizienten Möglichkeiten abgedeckt, eine Tabelle aus einer Reihe von Objekten in JavaScript zu erstellen.

Abschluss

In JavaScript für die Bildung einer Tabelle aus einem Array von Objekten die HTML “Tisch”String oder“Karte()”Methode kann 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 erörtert.

Verwenden Sie die “Objekt.Schlüssel()Methode, um auf die Schlüssel des definierten Objekts zuzugreifen und dann die “zu verwenden“verbinden()Methode, um sie als Überschriften innerhalb der "zu platzieren"	" Schild: $ Objekt.Schlüssel (Array [0]).verbinden('	') Nach dem Hinzufügen des TABEL -TAGS -TAGS- und TABLE -Zeilen- und Datenöffnungs -Tags des Tabellenkopfes verwenden wir die “Karte()”Methode zum Aufrufen der“Objekt.Werte()Methodenfunktion für jeden Wert der Objekttasten und verwenden Sie dann die “verbinden()Methode, um sie innerhalb einer Reihe zu platzieren und zum nächsten zu wechseln:
$ Array.Karte (e => Objekt.Werte (e) .verbinden('	')).verbinden('
')

« Wie man eine diagonale Linie mit CSS zeichnet

Makros in c »

Golang

So verwenden Sie das Defer -Schlüsselwort in Golang

Schichten Sie die Schlüsselwort auf, plant einen Funktionsaufruf. Es ermöglicht die Verzögerung der ...

Ansgar Radtke

c scharf

Wie Lambda -Operator '=>' in C# verwendet wird

Der Bediener '=>' erstellt anonyme Funktionen in C#und trennt Eingabeparameter von der Funktionsbehö...

Fr. Chris Frisch

Php

So verwenden Sie die PHP RAND -Funktion

Die Rand () -Funktion in PHP kann verwendet werden, um Zufallszahlen für verschiedene Zwecke zu gene...

Jean Dengler