Bekerja dengan Data JSON dalam Persekitaran HTML-tutorial css-php.cn

Working with JSON Data in an HTML Environment

Saya baru-baru ini mula menggunakan JSON dalam projek pembangunan web saya dan menghadapi isu yang menarik semasa cuba mengintegrasikannya dengan HTML menggunakan JavaScript. Khususnya, saya menggunakan fungsi ambil untuk mendapatkan semula data JSON, yang berfungsi dengan baik untuk mengelog data dalam konsol. Walau bagaimanapun, saya menghadapi beberapa cabaran apabila cuba memaparkan data ini dalam medan input HTML. Daripada menunjukkan data sebenar, ia sama ada memaparkan "tidak ditentukan" atau "[Objek objek]". Saya mengesyaki ini disebabkan oleh tingkah laku tak segerak, dan saya membaca bahawa menggunakan async/menunggu mungkin menyelesaikannya. Walau bagaimanapun, ini membawa kepada ralat yang berkaitan dengan ES versi 8, yang sukar untuk diselesaikan kerana kebanyakan sumber ditujukan kepada projek yang lebih kompleks. Di bawah ialah kod yang sedang saya gunakan:

Contoh Ambil JSON

Fail CSS (json_example.css)

css

#jsonInput {
kedudukan: tetap;
atas: 50%;
kiri: 50%;
ubah: terjemah(-50%, -50%);
lebar: 400px;
ketinggian: 30px;
saiz fon: 16px;
padding: 5px;
}
Fail JavaScript (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));

Salin selepas log masuk

});
Fail JSON (person.json)

json

{
"Nama pertama": "Jane",
"Nama Akhir": "Doe",
"umur": 25,
"bandar": "Los Angeles"
}`

Kod mengambil data JSON dan memaparkannya dalam konsol tanpa sebarang masalah. Walau bagaimanapun, apabila cuba memasukkan data ini ke dalam medan input teks HTML, ia sama ada menghasilkan nilai "tidak ditentukan" atau memaparkan "[Objek Objek]" dan bukannya kandungan JSON yang diingini. Menggunakan async/wait untuk mengendalikan sifat tak segerak bagi pengambilan mungkin membantu, tetapi ia membawa kepada isu keserasian dengan ES versi 8.

Bagaimanakah saya boleh memaparkan data JSON dengan betul dalam elemen HTML seperti medan input teks?
Apakah amalan terbaik untuk mengendalikan operasi tak segerak apabila bekerja dengan JSON dalam projek web asas?

Atas ialah kandungan terperinci Bekerja dengan Data JSON dalam Persekitaran HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!