Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Arbeiten mit JSON-Daten in einer HTML-Umgebung

WBOY
Freigeben: 2024-08-20 18:41:15
Original
315 Leute haben es durchsucht

Working with JSON Data in an HTML Environment

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:






JSON-Abrufbeispiel







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));
Nach dem Login kopieren

});
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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!