如何在 Django 模板上传递 Python 列表并在 JavaScript 中使用它？答案

【问题标题】：How do I pass Python list on Django template and use it in JavaScript?如何在 Django 模板上传递 Python 列表并在 JavaScript 中使用它？
【发布时间】：2020-05-26 18:26:37
【问题描述】：

我有一个 python 列表，里面有列表。我将它渲染成 Django 模板以在我的 JavaScript 中使用。我做了json.dumps(postImages)，然后用let postImages = {{ postImages|safe }} 逃脱了。即使我的 lint 发出警告，它也有效！但问题是，主列表中有列表。所以每当我这样做时，postImages[0].length 或postImages[0][0]，它认为它是一个字符串，现在是一个列表。

<script>
  var postImages = {{ postImages|safe }};
  const divCard = document.querySelector('.card');
  const divDesc = document.querySelector('.description');
  console.log(postImages.length)
  for (let i = 0; i < postImages.length; i++){
      let img = document.createElement('img');
      img.classList = ['resize_no_stretch', 'images']
      img.setAttribute('src', postImages[i][0]);
      console.log(postImages[i][0])
      divCard.insertBefore(img, divDesc);
  };
</script>

【问题讨论】：

好像你生成了一个字符串，而不是一个列表。如果你有一个正确的 JSON，那么你应该简单地解析它来使用它。如果你不这样做......我建议生成 JSON，因为它比尝试消耗相当于 JS 随机格式的内容要简单得多。
您的模板将帮助您了解您是如何完成此编码的，请始终发布一段代码，以帮助其他人为您提供解决方案
添加了代码，如果有任何问题，请告诉我！并感谢你们的帮助！
@MikeYaBoii 你当然会得到一个字符串——这就是你用var postImages = '{{ postImages }}'; 明确要求的（你认为{{ postImage }} 周围的引号在做什么？）。如果您想要一个 javascript 列表，只需遵循 Valz 的建议，将 jsonified 列表传递给您的模板。 说到这里，你为什么在这里使用 JS 呢？你可以在模板渲染时使用模板语言来做同样的事情。
嗯，我试过做 json 转储和 escapejs。但它似乎没有工作

标签： javascript python django django-templates escaping

【解决方案1】：

现在解决了。我所做的是，我在视图中导入了 json，而不是正常渲染它，我 json.dumps() 它。

views.py：

import json

postImages = json.dumps(list_of_lists)

return render(request, 'craiglist_clone/results.html', {'postImages' : postImages})

django 模板（craiglist_clone/results.html）：

let postImages = {{ postImages|safe }}

你的 lint 我给你警告，但它仍然有效！

【讨论】：