Wie füge ich json zu HTML hinzu

Nachdem Sie eine JSON-Datei angeschlossen haben, sollten Sie normalerweise warten, bis die Datei vollständig geladen und ausgeführt ist, bevor Sie mit dem Inhalt arbeiten. Dies kann beispielsweise mithilfe des Ereignisses "DOMContentLoaded" oder "load" erfolgen.

Wenn Sie eine JSON-Datei anschließen und ihren Inhalt verwenden, können Sie die Webseite mit dynamischen Daten bereichern, die für verschiedene Zwecke angezeigt und verwendet werden können.

Lesen von Daten aus einer JSON-Datei

Das Lesen von Daten aus einer JSON-Datei im HTML-Markup kann mit JavaScript und AJAX erfolgen. Zunächst müssen Sie eine JSON-Datei mit den erforderlichen Daten erstellen.

Um Daten aus einer JSON-Datei in HTML zu lesen, müssen Sie zunächst ein XMLHttpRequest-Objekt erstellen. Rufen Sie dann die open() -Methode dieses Objekts auf und geben Sie den Pfad zur JSON-Datei an. Rufen Sie dann die send() -Methode auf, um die Anforderung an den Server zu senden und die Daten aus der JSON-Datei abzurufen.

Beispielcode zum Lesen von Daten aus einer JSON-Datei:

let request = new XMLHttpRequest();request.open('GET', 'file.json', true);request.onload = function() = 200 && request.status < 400) );> else >;request.send();

Beachten Sie, dass die open() -Methode drei Argumente akzeptiert: eine Anforderungsmethode (GET oder POST), eine Datei-URL und ein Flag, das angibt, dass die Anforderung asynchron ist.

Nachdem der Code ausgeführt wurde, wird auf der Webseite eine Liste der Daten aus der JSON-Datei c angezeigt.

Beispiel für die Verwendung einer for-Schleife:

const json = < name: 'Иван', age: 25 >,< name: 'Мария', age: 30 >,< name: 'Алексей', age: 20 >,];let html = '';for (let i = 0; i < json.length; i++) ' + user.name + ' - Возраст: ' + user.age + '

';>document.getElementById('users').innerHTML = html;

In diesem Beispiel wird ein JSON-Objekt angegeben, das Benutzerdaten enthält. Die for-Schleife durchläuft jedes Element des Arrays und fügt mit dem Operator += eine HTML-Zeichenfolge mit Informationen über jeden Benutzer in die HTML-Variable ein. Der Wert dieser Variablen wird dann dem Element mit der ID "users" zugewiesen.

Beispiel für die Verwendung der forEach-Methode:

const json = < name: 'Иван', age: 25 >,< name: 'Мария', age: 30 >,< name: 'Алексей', age: 20 >,];let html = '';json.forEach(user => ' + user.name + ' - Возраст: ' + user.age + '

';>);document.getElementById('users').innerHTML = html;

In diesem Beispiel wird die forEach-Methode für jedes Element im JSON-Array aufgerufen. Für jedes Element fügt die Handlerfunktion eine HTML-Zeichenfolge mit Benutzerinformationen an die HTML-Variable an. Der Wert dieser Variablen wird dann dem Element mit der ID "users" zugewiesen.

Verwenden von bedingten Operatoren

Um mit bedingten Anweisungen in HTML zu arbeiten, können Sie JavaScript verwenden, mit dem Sie einer Webseite dynamisches Verhalten hinzufügen können.

Eine der am häufigsten verwendeten bedingten Anweisungen in JavaScript ist die if-Anweisung. Es ermöglicht Ihnen, abhängig von der Bedingung einen bestimmten Code auszuführen. Sie können beispielsweise eine Bedingung verwenden, um einer Seite ein bestimmtes HTML-Element hinzuzufügen:

In diesem Beispiel wird ein Element hinzugefügt, wenn die Bedingung wahr ist

HTML-Element

Neben der if-Anweisung gibt es noch einige andere bedingte Anweisungen, z. B. eine switch-Anweisung und Vergleichsoperatoren (==, ===, !=, !==, , =), mit denen Sie abhängig von den Bedingungen verschiedene HTML-Elemente zu einer Seite hinzufügen können.

Wenn Sie bedingte Anweisungen in HTML verwenden, müssen Sie daran denken, dass sich der JavaScript-Code innerhalb des Tags befinden muss , wie im obigen Beispiel gezeigt.

Manipulation von Daten

Die Arbeit mit JSON-Daten in HTML ermöglicht eine Vielzahl von Manipulationen an Informationen. Hier sind einige nützliche Tricks:

1. Abrufen von Daten aus JSON

Sie können JavaScript verwenden, um Daten aus einer JSON-Datei abzurufen. Sie müssen zuerst die JSON-Datei mit einer AJAX-Anfrage vom Server herunterladen und dann den Inhalt mit der JSON-Methode analysieren.parse(). Die resultierenden Daten können zum Ausfüllen von HTML-Elementen verwendet werden.

fetch('data.json')
.then(response => response.json())
.then(data => document.getElementById("myElement").innerHTML = data.name;
>)
.catch(error => console.error(error));

2. Ändern von Daten in JSON

Um die Daten in einer JSON-Datei zu ändern, müssen Sie sie zuerst laden und in ein JavaScript-Objekt konvertieren. Anschließend können Sie das Objekt nach Bedarf ändern und es mithilfe der JSON-Methode im JSON-Format speichern.stringify().

fetch('data.json')
.then(response => response.json())
.then(data => data.age = 30;
fetch('update_data.php', method: 'POST',
body: JSON.stringify(data)
>);
>)
.catch(error => console.error(error));

3. Filtern und Sortieren von Daten aus JSON

Die aus JSON abgeleiteten Daten können mithilfe von JavaScript-Funktionen nach verschiedenen Kriterien gefiltert und sortiert werden. Sie können beispielsweise Datensätze nach einem bestimmten Feldwert filtern oder sie in alphabetischer Reihenfolge sortieren.

fetch('data.json')
.then(response => response.json())
.then(data => const filteredData = data.filter(item => item.age > 25);
const sortedData = data.sort((a, b) => a.name.localeCompare(b.name));
>)
.catch(error => console.error(error));

Dies sind nur einige grundlegende Methoden, um mit JSON-Daten in HTML zu arbeiten. Es gibt andere Tricks, einschließlich der Zusammenführung von Daten aus mehreren JSON-Dateien, dem Hinzufügen neuer Datensätze und mehr. Dadurch können Sie effizient mit Daten arbeiten und dynamische und interaktive Webanwendungen erstellen.

Hinzufügen von Stilen zu Daten aus json

Sie können CSS-Klassen verwenden, um den Daten aus json Stile hinzuzufügen. Sie können für jedes Element aus json ein separates Element in HTML mit der entsprechenden Klasse erstellen.

In einer CSS-Datei können Sie Stile für jede Klasse definieren. Wenn beispielsweise ein "title" -Element in JSON vorhanden ist, können Sie ein HTML-Element mit der Klasse "title" erstellen und der Klasse in der CSS-Datei einen entsprechenden Stil hinzufügen.

Sie können auch Stile direkt zu HTML-Elementen hinzufügen. Dazu können Sie das Attribut "style" verwenden. Wenn beispielsweise ein "description" -Element in json vorhanden ist, können Sie den entsprechenden Stil direkt zum HTML-Element hinzufügen, indem Sie das Attribut "style" verwenden.

Sie können auch integrierte Tags zum Formatieren von Text verwenden, z. B. italic, bold, underline, strikethrough. Diese Tags können direkt zu HTML-Elementen hinzugefügt oder in einer CSS-Datei verwendet werden.

Das Hinzufügen von Stilen zu JSON-Daten hängt daher davon ab, welche Stile angewendet werden müssen und welche Flexibilität erforderlich ist. Sie können CSS-Klassen, das "style" -Attribut oder Inline-Tags verwenden, um Text in HTML-Elementen zu formatieren.

Arbeiten mit Ereignissen

In HTML können Sie den Elementen auf der Seite Ereignisse hinzufügen. Ereignisse ermöglichen es Ihnen, auf Benutzeraktionen wie Klicken, Schweben und andere zu reagieren.

Das Attribut wird verwendet, um mit Ereignissen zu arbeiten oneventName, wo eventName - der Name des Ereignisses, auf das Sie reagieren müssen. Zum Beispiel wird ein Attribut verwendet, um einen Click-Ereignishandler hinzuzufügen onclick.

Normalerweise wird der Ereignishandler als JavaScript-Code angegeben. Wenn Sie beispielsweise die Hintergrundfarbe ändern möchten, wenn Sie auf eine Schaltfläche klicken, können Sie den folgenden Code verwenden:

Изменить цвет фона

Sie können auch einen Ereignishandler für eine externe Funktion festlegen. Dazu müssen Sie den Funktionsnamen im Ereignisattribut angeben. Zum Beispiel:

Изменить цвет фона

Wo ist die Funktion changeBackgroundColor definiert im JavaScript-Code der Seite:

function changeBackgroundColor() 

Dadurch können Sie Ereignisse hinzufügen und verarbeiten, um die Interaktion des Benutzers mit der Webseite dynamischer und interaktiver zu gestalten.

Anzeigen von Bildern aus JSON

Führen Sie die folgenden Schritte aus, um Bilder aus JSON anzuzeigen:

1. Holen Sie sich JSON-Daten, die Informationen zu Bildern enthalten.
2. Konvertieren Sie die resultierenden Daten mithilfe der JSON-Funktion in JavaScript-Objekte.parse() .
3. Verwenden Sie eine Schleife, um Objekte zu durchlaufen und HTML-Elemente zu erstellen, um Bilder anzuzeigen.
4. Fügen Sie Bilder mithilfe der src-Eigenschaft des Elements in ein HTML-Dokument ein .

Beispiel für die Implementierung dieser Funktionalität:

fetch('images.json').then(response => response.json()).then(data => );>);

In diesem Beispiel senden wir eine Anfrage zum Abrufen von JSON-Daten aus der Datei "images".json" und wandle sie in JavaScript-Objekte um. Dann erstellen wir die Elemente und fügen Sie die resultierenden Bilder mit der ID "images-container" in den Container ein.

Auf diese Weise können wir Bilder aus JSON in einem HTML-Dokument mit JavaScript rendern.