在 HTML 環境中使用 JSON 數據

我最近開始在我的 Web 開發專案中使用 JSON，並在嘗試使用 JavaScript 將其與 HTML 整合時遇到了一個有趣的問題。具體來說，我使用 fetch 函數來檢索 JSON 數據，這對於在控制台中記錄數據非常有用。然而，當我嘗試在 HTML 輸入欄位中顯示這些資料時，我遇到了一些挑戰。它沒有顯示實際數據，而是顯示「未定義」或「[object Object]」。我懷疑這是由於異步行為造成的，並且我讀到使用 async/await 可能會解決這個問題。然而，這導致了與 ES 版本 8 相關的錯誤，這很難排查，因為大多數資源都面向更複雜的專案。以下是我目前正在使用的程式碼：

頭>


身體>

CSS 檔案 (json_example.css)

CSS

#jsonInput {
位置：固定；
上：50%；
左：50%；
變換：翻譯(-50%, -50%);
寬度：400px；
高度：30px；
字體大小：16px;
內邊距：5px；
}
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));

});
JSON 檔案 (person.json)

json

{
“名字”：“簡”，
"lastName": "Doe",
「年齡」：25，
「城市」：「洛杉磯」
}`

程式碼取得 JSON 資料並將其顯示在控制台中，沒有任何問題。但是，當嘗試將此資料插入 HTML 文字輸入欄位時，它會導致「未定義」值或顯示「[object Object]」而不是所需的 JSON 內容。使用 async/await 處理 fetch 的非同步特性可能會有所幫助，但它會導致與 ES 版本 8 的兼容性問題。

如何在 HTML 元素（如文字輸入欄位）中正確顯示 JSON 資料？
在基本 Web 專案中使用 JSON 時，處理非同步操作的最佳實務是什麼？

以上是在 HTML 環境中使用 JSON 數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！