将 JSON object 从 Django 传递到 Javascript 无法正常工作

Question

我需要将 json object 传递给 Django 中的 javascript 脚本。我使用了此处描述的方法：

Django：将 JSON 从视图传递到模板

这是我的观点：

 def test_json(request):
    data = {}
    data['key'] = 'value'
    json_data = json.dumps(data)
    return render(request, 'test_json.html', {'json_data':json_data}) 

还有我的模板：

{{ json_data|json_script:"json_data" }}
<script>
  const mydata = JSON.parse(document.getElementById("json_data").textContent);
  const keys = Object.keys(mydata);
  console.log(keys);
</script>

但是控制台output是这样的：

[
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15"
]

就像它不识别键，但将 json object 的每个字符识别为键，就像不识别 JSON 结构。

如果我像这样更改模板中的脚本：

{{ json_data|json_script:"json_data" }}


<script>
   // const mydata = JSON.parse(document.getElementById('json_data').textContent);
//const keys = Object.keys(mydata);
//console.log(keys)
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; 

const obj = JSON.parse(text); 
const keys1 = Object.keys(obj);
console.log(keys1)
</script>

Output：

    [
  "employees"
]

我正确地拿到了钥匙。 这就像在将 JSON 从 Django 提供给模板的过程中出现的问题。

有什么建议吗？

谢谢。

Answer 1

使用json_script过滤器时，无需先将 object 序列化为 JSON，过滤器会为您处理

看法

def test_json(request):
    data = {'key': 'value'}
    return render(request, 'test_json.html', {'data': data}) 

模板

{{ data|json_script:"json_data" }}