在 HTML 脚本中动态加载 json 内容答案

【问题标题】：Dynamically loading json content within a HTML Script在 HTML 脚本中动态加载 json 内容
【发布时间】：2022-01-20 20:03:00
【问题描述】：

我正在使用 HTML 和 javascript 编写网页。我编写了一个从 json 文件加载记录的脚本（如下所示）。我的脚本旨在从 json 文件加载数据并像引导警报一样显示。当我第一次运行它时，脚本工作，但奇怪的是随后的测试没有工作。有没有人有任何想法来解决这个问题？

index.html:

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link type="text/css" href="css/style.css" rel="stylesheet">
        <!-- Script in Question -->
        <script type="text/javascript">
            // This is a way to load data from a JSON file and load it into places in the html document. Based on: https://howtocreateapps.com/fetch-and-display-json-html-javascript/
            fetch('alerts.json')
                .then(function(response){
                    return response.json();
                })
                .then(function (data){
                    appendData(data);
                })
                .catch(function (err) {
                    console.log(err);
                });
            function appendData(data) {
                var container = document.getElementById("alerts");
                for (let i = 0; i < data.length; i++) {
                    var div = document.createElement("div");
                    div.className = "alert alert-primary";
                    div.setAttribute("role", "alert")
                    div.innerHTML = data[i].content;
                    container.appendChild(div)
                }
            }
        </script>
        <title>Guitars</title>
    </head>
    <body>
        <div id="alerts" style="text-align: center;">
        <!-- JSON data appears here -->
        </div>
        <div style="text-align: center;" id="main">
        <!-- Other stuff here -->
        </div>
        <div style="text-align: center;">
        <!-- Other stuff here -->
        </div>
    </body>
</html>

alerts.json：

[
    {"content":"Welcome back, test1!"}, 
    {"content":"Welcome back, test2!"},
    {"content":"Welcome back, test3!"}
]

代码从alerts.json 中读取记录并将它们插入到一个id 为“alerts”的div 中——如<script> 标签所示。任何帮助将不胜感激！

【问题讨论】：

什么“没有用”？
fs = require('fs') fs 是 nodeJS 代码，所以 1）您不应该将它用于客户端代码，并且 2）您无论如何都不会使用它，因此您可以删除该行。跨度>
@David 当我从 nodejs 运行我的网页时，我不会在页面上看到引导式警报，该功能旨在产生。
@Andy 谢谢你，我会删除这条线。
@JeremyRoy：在你浏览器的调试工具中，开发控制台有错误吗？当您使用浏览器的脚本调试器时，单步执行您调用的函数时具体会发生什么？变量的运行时值是否符合您的预期？特定操作是否失败？现在是进行一些调试并提供有关问题的详细信息的好时机。

标签： javascript html json

【解决方案1】：

在这里。感谢用户@David，建议清除网页调试控制台中发现的所有错误。清除这些后，该功能就按预期工作了！

【讨论】：