在 HTML 环境中使用 JSON 数据

我最近开始在我的 Web 开发项目中使用 JSON，并在尝试使用 JavaScript 将其与 HTML 集成时遇到了一个有趣的问题。具体来说，我使用 fetch 函数来检索 JSON 数据，这对于在控制台中记录数据非常有用。然而，当我尝试在 HTML 输入字段中显示这些数据时，我遇到了一些挑战。它没有显示实际数据，而是显示“未定义”或“[object Object]”。我怀疑这是由于异步行为造成的，并且我读到使用 async/await 可能会解决这个问题。然而，这导致了与 ES 版本 8 相关的错误，该错误很难排查，因为大多数资源都是面向更复杂的项目。以下是我当前正在使用的代码：

<元名称=“视口”内容=“宽度=设备宽度，初始比例= 1.0”>

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中文网其他相关文章！