如何在模板字符串中遍历数组？模态框Ajax渲染输出[object object]

你遇到的问题核心在于**$.each的返回值并不是你拼接好的字符串**，它会返回原始的data对象/数组，所以直接把它和模板字符串拼接时，就会被转换成[object Object]输出。下面给你两种简洁的修复方案：

方案1：用$.each拼接字符串 #

初始化一个空字符串，在循环里逐个追加内容：

.done(function (data) { 
  // 初始化空字符串用来存储拼接后的HTML
  var itemsList = '';
  $.each(data, function (index, item) { 
    // 把每个item的内容追加到字符串里
    itemsList += '<p>' + item.prod_name + '</p>'; 
  }); 
  // 用模板字符串插值更清晰
  var modal = `<div class="modal-body">${itemsList}</div>`; 
  // 这里添加模态框的渲染逻辑，比如插入到页面或显示
})

方案2：用map+join更简洁 #

利用数组的map方法生成每个元素的HTML片段数组，再用join('')把数组转成完整字符串：

.done(function (data) { 
  // 先映射每个item为HTML字符串，再拼接成整体
  var itemsList = data.map(function(item) {
    return `<p>${item.prod_name}</p>`;
  }).join('');
  var modal = `<div class="modal-body">${itemsList}</div>`; 
  // 后续渲染逻辑
})

额外提示： #

• 如果你的data是对象而非数组，可以先用Object.values(data)把它转成数组再用map；
• 模板字符串里的${}插值语法比+号拼接更易读，推荐使用；
• 记得确保data里的prod_name字段确实存在（你已经能console.log看到数据，这步应该没问题）。

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