javascript - 无法使用从 Django 发送到模板的字典

Question

我在 python 中有以下字典，我将其发送到模板:

mydict = {
    "ABC": {
        "target_weight": 1,
        "target_ra_weight": 2
    },
    "XYZ": {
        "target_weight": 3,
        "target_ra_weight": 4
    },
    "JKL": {
        "target_weight": 5,
        "target_ra_weight": 6
    }
}
return render(request, 'template.html', {'mydict': mydict})

我似乎无法将此分配给 javascript 变量并访问内容。我在模板的 javascript 部分尝试了以下所有方法:

var mydict = {{ mydict }};
> Uncaught SyntaxError: unexpected token {

var mydict = {{ mydict|safe }};
> Uncaught SyntaxError: unexpected token {

var mydict = {{ mydict|escapejs }};
> Uncaught SyntaxError: unexpected token {

以下允许我创建变量，但是当我尝试访问它时(例如:console.log(mydict))，然后出现错误:

var mydict = JSON.parse('{{ mydict }}');
console.log(mydict);
> Uncaught SyntaxError: unexpected token { in JSON at position 1
// same thing happens when using |safe or |escapejs

Answer 1

您需要 JSON，而不是字典。使用 json.dumps功能:

import json

mydict = {
    "ABC": {
        "target_weight": 1,
        "target_ra_weight": 2
    },
    "XYZ": {
        "target_weight": 3,
        "target_ra_weight": 4
    },
    "JKL": {
        "target_weight": 5,
        "target_ra_weight": 6
    }
}
return render(request, 'template.html', {'mydict': json.dumps(mydict)})

在模板中:

var mydict = JSON.parse('{{ mydict|safe }}');