jQuery的append方法中用Array.forEach不生效，图片显示undefined如何解决

问题原因 #

• Array.forEach() 本身没有返回值，执行后默认返回undefined，你直接将forEach的执行结果拼接进HTML字符串，对应位置自然就显示为undefined。
• 代码中重复声明id="imagecol"，id在DOM结构中必须唯一，多个元素使用相同id会导致后续DOM选择、操作出现异常。

解决方案 #

用Array.map()遍历数组生成每个img标签的字符串，再用join('')把数组合并为完整的HTML字符串，同时将重复的id改为class避免冲突。如果有必要可以增加空判断，避免attachment为空时JSON解析报错。

修正后的代码如下：

data.rows.forEach(function (row) {
  // 增加空判断避免解析报错
  var attachments = row.attachment ? JSON.parse(row.attachment) : [];
  // 生成图片HTML字符串
  var imgHtml = attachments.map(item => {
    return "<img src='"+item+"' class='img-thumbnail'>"
  }).join('')

  $("#records_row").append(
    "<tr>\
      <td>" +row.id +"</td>\
      <td>" + row.subject +"</td>\
      <td class='imagecol'>"+ imgHtml +"</td>\
     </tr>"
  );
});

如果项目支持ES6模板字符串，也可以改用模板字符串简化拼接逻辑：

data.rows.forEach(function (row) {
  var attachments = row.attachment ? JSON.parse(row.attachment) : [];
  const imgHtml = attachments.map(item => `<img src="${item}" class="img-thumbnail">`).join('')
  $("#records_row").append(`
    <tr>
      <td>${row.id}</td>
      <td>${row.subject}</td>
      <td class="imagecol">${imgHtml}</td>
    </tr>
  `)
});

内容的提问来源于stack exchange，提问作者Mike Tabag Estonanto