Ejs/NodeJs/MongoDB论坛：回复数组无法正常展示问题求助

嘿，我懂你的困扰啦！你直接输出reponse数组的时候，EJS会默认把数组转换成逗号分隔的字符串，所以所有回复都挤在同一个<p>标签里了。要解决这个问题，只需要给回复数组也加一个遍历循环，把每条回复单独渲染成独立的元素就行。

修改后的核心代码片段 #

把你原来的这一行：

<p class="repArray"><%=collectionName[i].reponse%></p>

替换成下面的遍历代码（两种方式任选其一）：

方式1：使用for循环

<div class="repArray">
  <% for (let j = 0; j < collectionName[i].reponse.length; j++) { %>
    <p class="single-reply"><%= collectionName[i].reponse[j] %></p>
  <% } %>
</div>

方式2：使用forEach（更简洁）

<div class="repArray">
  <% collectionName[i].reponse.forEach(reply => { %>
    <p class="single-reply"><%= reply %></p>
  <% }) %>
</div>

完整修改后的代码参考 #

<div class="vosQuestions" id="vosQuestions" > 
  <% for(var i = 0; i < collectionName.length; i++) {%> 
    <div class="result"> 
      <span id="titreResultat" class="titreResultat"><%=collectionName[i].title%></span> 
      <div id="commentQuestions" class="commentOff"> 
        <p class="comment"><%=collectionName[i].commentaire%></p> 
        <div class="trait"></div> 
        <!-- 修改后的回复展示部分 -->
        <div class="repArray">
          <% collectionName[i].reponse.forEach(reply => { %>
            <p class="single-reply"><%= reply %></p>
          <% }) %>
        </div>
        <p id="rep2"> 
          <div id="test" class="reprep"> 
            <input id="repBtn" class="repondre" type="button" value="repondre"> 
          </div> 
        </p> 
      </div> 
    </div> 
  <%} %> 
</div>

额外优化建议 #

• 我把原来的<p class="repArray">改成了<div class="repArray">，因为现在它是一个容器，里面装多个<p>标签，语义更合理。
• 给每条回复加了single-reply类，方便你后续用CSS给每条回复设置样式（比如加左边距、底部边框，让不同回复区分更明显）。
• 如果你的reponse数组可能为空，可以加个空状态判断：

<div class="repArray">
  <% if (collectionName[i].reponse.length === 0) { %>
    <p class="no-reply">暂无回复</p>
  <% } else { %>
    <% collectionName[i].reponse.forEach(reply => { %>
      <p class="single-reply"><%= reply %></p>
    <% }) %>
  <% } %>
</div>

这样处理后，每条回复就会单独显示在各自的段落里，不会挤在一起啦！

内容的提问来源于stack exchange，提问作者Morgan Picard