Django 中 Javascript 动态 Html 内容的 For 循环

Question

我会有一个奇怪的问题。

版本：Django 3.0.8 版

这是我的 Javascript 代码：

 fetch(`/loadbox/${message.id}`) 
.then(response => response.json())
.then(dialog => {
   
    let detailcontent=
     `<div class="hepsi">
    <div class="sender">
    <h3>${dialog.sendername}</h3><br>
     @${dialog.sender}</div> 
    <p class="posting msj"> ${dialog.content}</p>
     <p class="posting rep"> ${dialog.reply}</p> // Here I have a list named replies and I want 
      to loop through all elements and display every reply for that particular message.
     <br> 
     <div class="m-form">
     <form class="form-control">
     <input class="msj-i" type="text" placeholder="Start a new message"></input>
     <input type="submit" value="Send" class="msj-s"></input>
     </form> </div></div>` ;
    document.querySelector('#message-view').innerHTML=detailcontent;
    document.querySelector('.msj-s').onclick = function() {
        sender=`${dialog.sender}`
        reply_message(sender);
        }
    })
}

所以我在哪里获取数据/loadbox/message.id，我有这个数据，例如：

   {"replies": ["hi there", "haha", "last"],"sendername": "Bilge", "sender": "bilge", "content": "hi"}

如您所见，回复是一个列表，我希望它在 HTML 模板中循环。 但是，我在我的 javascript 代码中使用了动态内容。 通常在 Django 模板中，我很容易做到

             {% for reply in replies %}
         {{reply }} 
              { % endfor %}

但是，我正在使用此方法编写动态 html：

    content = `"some content"`

    document.querySelector(".message-view").innerHtml = content

所以我需要在我认为的内容中循环这个。 我试过：

           {for (${reply} of ${replies})}
         <p class="posting rep"> ${reply} </p>

它给出了这个错误。 Uncaught (in promise) ReferenceError：reply is not defined 或者我试过：

        {% for ${reply} in ${replies} %}
      {{reply}}
          {% endfor %} 

但它给出了错误：

   Couldn't parse the remainder of ${replies}

所以我不确定这是否可能，如果您对改变我的逻辑等有任何建议，我将不胜感激。

用于演示； 如果点击左边的消息，它会打开右边的消息，你可以回复它，我希望它在那里显示所有的回复。 目前，它是未定义的，因为我把整个列表而不是元素。

Answer 1

在模板文字中，您可以使用Array.prototype.map()方法循环回复并为每个回复返回一个字符串。 现在您将拥有一个包含字符串的数组。 最后一步是使用Array.prototype.join()方法将数组转换为组合字符串。 使用空字符串作为分隔符将字符串连接在一起。

fetch(`/loadbox/${message.id}`) 
    .then(response => response.json())
    .then(dialog => {
       
        let detailcontent = `
            <div class="hepsi">
                <div class="sender">
                    <h3>${dialog.sendername}</h3>
                    <br>
                     @${dialog.sender}
                </div> 
                <p class="posting msj">${dialog.content}</p>
                ${dialog.replies.map(reply => 
                    `<p class="posting rep">${reply}</p>`
                ).join('')}
                <br> 
                <div class="m-form">
                    <form class="form-control">
                        <input class="msj-i" type="text" placeholder="Start a new message">
                        <input type="submit" value="Send" class="msj-s">
                    </form> 
                </div>
            </div>
        `;

        document.querySelector('#message-view').innerHTML = detailcontent;
        document.querySelector('.msj-s').onclick = function() {
            sender = `${dialog.sender}`
            reply_message(sender);
        }
    });