将 Django 模板中的 JSON 传递给独立的 Javascript 文件

Question

我的 views.py 中有以下代码：

from django.shortcuts import render
from django.shortcuts import render_to_response
from django.http import HttpResponse
import json, requests

platformReq = requests.get(platformUrl, headers={'Authorization': 'Token token="1234"'})

platformData = json.loads(platformReq.text)
return render_to_response('find.html',{'platformList':platformData})

在我的模板文件中我有这个：

<script src="{% static "js/standalone.js" %}" type="text/javascript"></script>
  <script>
    {# this is where it fetches the json and formats it correctly #}
    var js_variable = {{platformList | jsonify}};
    console.log(js_variable);
    function_in_standalone_js(js_variable);
</script>

JSON 从 console.log() 正确输出，但我收到错误：

ReferenceError: function_in_standalone_js is not defined

在我的独立 Javascript:

var function_in_standalone_js = function(js_variable)
{
var options = js_variable['platforms'];
console.log(options)
}

这是输出结果，以及 console.log() 给出的结果（有 3 个以上，但我不想粘贴整个内容）：

{"platforms": [{"slug": "saturn", "id": 32, "name": "Sega Saturn"}, {"slug": "mac", "id": 14, "name": "Mac"}, {"slug": "vc", "id": 47, "name": "Virtual Console (Nintendo)"}]}

提前致谢！

Answer 1

可能是您的 standalone.js 在模板中的代码之后加载，因此出现错误

Answer 2

由于模板中 JS 的加载时间不同，您应该将内联 JS 包装在 $(document).ready(function(){...}) 中，以确保仅在文档的其余部分（包括外部 JS）加载后才运行文件。

<script>
    $(document).ready(function(){
      var js_variable = {{platformList | jsonify}};
      console.log(js_variable);
      function_in_standalone_js(js_variable);
    });
</script>

将 Django 模板中的 JSON 传递给独立的 Javascript 文件

Passing JSON in Django Template to Standalone Javascript File

javascript

django

json

django-templates

django-views