Django 在模板中向 Javascript 发送数据答案

【问题标题】：Django send data to Javascript in templateDjango 在模板中向 Javascript 发送数据
【发布时间】：2019-02-01 09:40:57
【问题描述】：

我想为我提取的文档之间的一些链接制作一个非常简单的网络图，并将其显示在现有的 Django 应用程序中。我已经看过一堆 Bokeh/Django 集成和类似的东西，但似乎没有什么合适的。因此，我决定继续尝试 D3。我不知道任何Javascript。我复制了这里提供的模板：http://bl.ocks.org/mbostock/2706022，这对我来说很好。我需要做的就是提供我自己的数据。我可以在视图中建立一个字典列表并将它们作为上下文传递。我可以使用 {{ data }} 在模板中访问该上下文。但是，我不知道如何将其提供给 javascript。这是我需要更改的相关部分：

var links = [
  {source: "Microsoft", target: "Amazon", type: "licensing"},
  {source: "Microsoft", target: "HTC", type: "licensing"},
  {source: "Samsung", target: "Apple", type: "suit"},
  {source: "Motorola", target: "Apple", type: "suit"},
  {source: "Nokia", target: "Apple", type: "resolved"},
...
  {source: "Nokia", target: "Qualcomm", type: "suit"}
];

这看起来像一个字典列表。但我不知道，那里有一些空话，所以我不确定 Javascript 是如何看待这件事的，以及如何将 python 上下文转换为任何内容。我想像

var links = <cast>({{data}})

如何实现这一点，以便我可以将这个 D3 代码传递给我自己的数据？

【问题讨论】：

标签： javascript python django templates

【解决方案1】：

您可以建立您的字典列表并将其传递给您的模板as JSON。
然后 parse your JSON string 在 javascript 中。

在 python 中，使用 data = json.dumps(your_list_of_dict)，在 javascript 中，使用 var links = JSON.parse('{{data}}');。您可能需要针对潜在的报价问题采取更多措施。

【讨论】：

是的，报价似乎有问题。如果我修复它，我会告诉你的。
SyntaxError: JSON.parse: expected property name or '}' at the line 1 column 3 JSON data
根据你的编码可能会有所不同，你可以试试data = json.dumps(your_list_of_dict).replace(/&quot;/ig,'"');
嗯，好的，是的。我在发送到 JSON 之前记录了“{{data}}”，并且：[{“source”：“Microsoft”，“target”：“Amazon”，“type”：“licensing”}，{“ “来源”：“微软”，“目标”：“其他人”，“类型”：“许可”}]
查看之前的评论，您只需要将那些&quot; 替换为"