在 JavaScript 变量中使用 for django 循环

Question

我想在 JavaScript 中循环执行 django 查询，例如：musics = Music.query.all()。

我做了这样的事情：

const songs = [
{% for music in musics %}
    {
        id: "{{music.id }}",
        songName: "{{ music.title }}",
        poster: "{{ music.cover_image.url }}",
    }
{% endfor %}
]
 Array.from(document.getElementsByClassName("songItem")).forEach((element, I) =>{
  element.getElementsByTagName('img').src = songs[I].poster;
})

我明白了

Uncaught TypeError: Cannot read properties of undefined (reading 'poster'),

但是如果我使用控制台日志

console.log(element.getElementsByTagName('img').src = songs[I].poster);

它在控制台中有效。

Answer 1

您的 foor 循环中缺少 ,。因此，您遇到语法错误。

const songs = [
  {% for music in musics %}
    {id: "{{music.id }}",
     songName: "{{ music.title}}",
     poster: "{{music.cover_image.url}}",
    }, // <-- HERE 
  {% endfor %}
]

如果您想将对象数据转换为 json，您也可以在视图中执行此操作并将 json 日期作为模板变量传递，而不是手动创建 songs .

在 JavaScript 变量中使用 for django 循环

Using for django loop inside of a JavaScript variable

javascript

django

python-3.8