Arbeiten mit JSON-Daten in einer HTML-Umgebung

Ich habe vor kurzem damit begonnen, JSON in meinen Webentwicklungsprojekten zu verwenden, und bin beim Versuch, es mithilfe von JavaScript in HTML zu integrieren, auf ein interessantes Problem gestoßen. Insbesondere habe ich die Fetch-Funktion zum Abrufen von JSON-Daten verwendet, was sich hervorragend für die Protokollierung der Daten in der Konsole eignete. Beim Versuch, diese Daten in einem HTML-Eingabefeld anzuzeigen, stieß ich jedoch auf einige Herausforderungen. Anstatt die tatsächlichen Daten anzuzeigen, wurde entweder „undefiniert“ oder „[Objekt Objekt]“ angezeigt. Ich vermute, dass dies auf asynchrones Verhalten zurückzuführen ist, und ich habe gelesen, dass die Verwendung von async/await das Problem lösen könnte. Dies führte jedoch zu einem Fehler im Zusammenhang mit ES Version 8, der schwer zu beheben war, da die meisten Ressourcen auf komplexere Projekte ausgerichtet sind. Unten ist der Code, mit dem ich derzeit arbeite:

CSS-Datei (json_example.css)

css

#jsonInput {
Position: fest;
oben: 50 %;
übrig: 50 %;
transform: Translate(-50%, -50%);
Breite: 400px;
Höhe: 30px;
Schriftgröße: 16px;
Polsterung: 5px;
}
JavaScript-Datei (json_example.js)

Javascript

`document.addEventListener("DOMContentLoaded", function() {
const jsonUrl = 'http://localhost:8080/data/person.json';

fetch(jsonUrl)
    .then(response => response.json())
    .then(data => {
        console.log(data);
        document.getElementById("jsonInput").value = JSON.stringify(data);
    })
    .catch(error => console.error('Error fetching JSON:', error));

});
JSON-Datei (person.json)

json

{
„Vorname“: „Jane“,
„lastName“: „Doe“,
„Alter“: 25,
„Stadt“: „Los Angeles“
}`

Der Code ruft JSON-Daten ab und zeigt sie problemlos in der Konsole an. Beim Versuch, diese Daten in ein HTML-Texteingabefeld einzufügen, führt dies jedoch entweder zu einem „undefinierten“ Wert oder es wird „[Objekt Objekt]“ anstelle des gewünschten JSON-Inhalts angezeigt. Die Verwendung von async/await zur Bewältigung der asynchronen Natur des Abrufs kann hilfreich sein, führt jedoch zu Kompatibilitätsproblemen mit ES-Version 8.

Wie kann ich die JSON-Daten in einem HTML-Element wie einem Texteingabefeld richtig anzeigen?
Was sind die Best Practices für den Umgang mit asynchronen Vorgängen bei der Arbeit mit JSON in einem einfachen Webprojekt?

Das obige ist der detaillierte Inhalt vonArbeiten mit JSON-Daten in einer HTML-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!