我是JS新手，想在我的html文件中显示一个要从本地JSON文件解析的变量吗？我用引导程序在Django中运行它。
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内部根本没有解析任何内容。
非常感谢你的帮助。
querySelector("output_1")不是有效的选择器，您不能将挂起的promise设置为innerHTML。
如果是id，则querySelector("output_1")应为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;
});
我找到了解决方案(多亏了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 %}