如何在 for 循环中使用 Django json_script

Question

假设我们在模板中有一个类似的表格

{% for object in object_list %}
   <tr>
      <td id="id-{{object.id}}">{{ object.id }}</td>
   </tr>
{% endfor %}

我正在考虑将object.id 用于事件，例如onclick，以确切知道使用了哪个object.id。

如何在 JavaScript 脚本中使用json_script 获取object.id？

Answer 1

在问题的情况下，我们有一个表格，我们希望有一个按钮来复制 object.id 以在 JavaScript 中使用。

有多种方法可以做到这一点，json_script 不是其中之一。

正如Abdul Aziz Barkat 所指出的那样

json_script 最终会给你诸如<script id="id-you-passed" type="application/json">1</script> 之类的东西，等等，对于像你这样的（重复的）单一属性数据，它是笨拙/矫枉过正的，你元素上的一个属性更适合你的情况。如果你有一个适当的集合（列表/字典等）要传递给 JavaScript，请使用 json_script。

相反，我们可以在按钮中做这样的事情

• onclick="copyId('{{object.id}}')"
• id="js-copy-id-btn-{{object.id}}"

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
      {% for object in object_list %}
      <tr>
          <td>{{object.id}}</td>
          <td><button id="js-copy-id-btn-{{object.id}}" onclick="copyId('{{object.id}}')">Copy ID</button></td>
      </tr>
      {% endfor %}
  </tbody>
</table>

然后 JavaScript 可能看起来像

<script>
  function copyId(id) {
    // ...
}
</script>

---

在 Django 模板中将数据传递给 JavaScript 的另一种解决方案是使用 data attributes，如 suggested by Adam Johnson

{% for object in object_list %}
   <tr>
      <td data-obj-id={{object.id}} class="obj">{{ object.id }}</td>
   </tr>
{% endfor %}


<script>
    const objs = document.querySelectorAll(".obj")
    objs.forEach(obj => {
        let id = obj.dataset.objId
        obj.addEventListener('click', function(event) {
          // Whatever you have to do with the id on click
        })
    })
</script>