Django Bootstrap - 如何解析本地 JSON 文件中的变量并将其显示在 .html 模板中？

Question

我是 JS 新手，想在我的 html 文件中显示一个要从本地 JSON 文件解析的变量？我是运行，在 Django 中使用 bootstrap。

myfile.json 包含：

[{"myvar":"1500000"}]

我的 html 模板 包含：

    ...
    <div class="col-9">
        <h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i><span id="output_1"></span></h3>
    </div>
    ...
    ...
<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

{% load static %}

    <script src="{% static 'dashboard_data.json' %}">
        var my_kpi = fetch("/static/dashboard_data.json")
        .then(response => response.json())
        .then(data => {
            console.log(data.myvar)
            document.querySelector("output_1").innerText = data.myvar
        });
        document.getElementById('output_1').innerHTML = my_kpi
    </script>
{% endblock javascripts %}

我不确定我做错了什么。在浏览器中调试时从开发工具中，我可以看到 JSON 文件出现在源代码中，但是 myvar 值没有显示在控制台和 html 页面中。看起来 my_kpi.

里面什么都没有被解析

非常感谢您的帮助。

Answer 1

querySelector("output_1") 不是有效的选择器，您不能将待处理的承诺设置为 innerHTML。

querySelector("output_1") 如果是 id 应该是 querySelector("#output_1")。

[{"myvar":"1500000"}] 是一个数组，所以你不能像 data.myvar 那样在你的承诺中记录，因为它是未定义的。 data.myvar 应该是 data[0].myvar.

fetch('/static/dashboard_data.json')
  .then((response) => response.json())
  .then((data) => {
    console.log(data[0].myvar);
    document.querySelector('#output_1').innerText = data[0].myvar;
  });

Answer 2

我找到了解决方案（感谢 Zsolt Meszaro！）

我也错误地读取了 JSON 文件...对于 Django Bootstrap，应该在 fetch() 函数内部传递以下命令："{% static filename.json%}" 而不是获取标准文件路径。确保您的文件在您的 /static/ 目录中。

下面的 html 代码现在可以正常工作了：

    ...
    <div class="col-9">
        <h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i><span id="output_1"></span></h3>
    </div>
    ...
    ...
<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

{% load static %}

    <script>
        fetch("{% static 'dashboard_data.json' %}")
        .then(response => response.json())
        .then(data => {
            console.log(data[0].myvar)
            document.querySelector("#output_1").innerText = data[0].myvar
        });
    </script>
{% endblock javascripts %}

Django Bootstrap - 如何解析本地 JSON 文件中的变量并将其显示在 .html 模板中？

Django Bootstrap - How to parse a variable from a local JSON file and display it in a .html template?

javascript

django

twitter-bootstrap

django-templates

django-bootstrap3