jQuery遍历JSON OrderLines数组逐条渲染HTML的实现问题

你这段遍历渲染的代码有两个硬伤：

1. 取值逻辑写错了：jQuery.each遍历数组时，回调的第二个参数就是当前循环到的订单行对象，PartNumber/Price这些字段是挂在这个单行对象上的，不是挂在order根对象上的，写order.PartNumber[i]完全取不对值。
2. 字符串拼接有语法问题：你把JS变量直接写在单引号包裹的字符串里，JS不会自动识别解析变量，只会把order.PartNumber[i]当成普通文字输出；另外普通单引号/双引号包裹的字符串不能直接换行，写了就报语法错误。

直接把你原来遍历OrderLines的代码块替换成下面的内容即可：

// 先清空容器，防止后续重复调用渲染出重复行
$(".order-lines-container").empty();

// 遍历订单行数组
$.each(order.OrderLines, function (index, currentLine) {
  // 用反引号包裹的模板字符串拼接HTML，通过${}直接插入变量值
  const tableRow = `
  <tr>
    <td width="80%">
      <span class="font-weight-bold">${currentLine.PartNumber}</span>
      <div class="product-qty">
        <span class="d-block">${currentLine.Description}</span>
        <span>Color</span>
      </div>
    </td>
    <td width="20%">
      <div class="text-right">
        <span class="font-weight-bold">£${currentLine.Price.toFixed(2)}</span>
      </div>
    </td>
  </tr>
  `;
  $(".order-lines-container").append(tableRow);
});

• 如果需要展示数量、行小计、税率这类其他订单行字段，直接在HTML对应位置写${currentLine.对应字段名}即可，比如展示数量就写${currentLine.Quantity}。
• 价格部分加了toFixed(2)处理，强制金额保留两位小数，符合日常金额展示规范。
• 如果你的项目需要兼容特别老的、不支持ES6模板字符串的浏览器，可以换成普通字符串拼接的写法：

// 兼容旧浏览器的字符串拼接写法
var tableRow = '<tr>' +
  '<td width="80%">' +
    '<span class="font-weight-bold">' + currentLine.PartNumber + '</span>' +
    '<div class="product-qty">' +
      '<span class="d-block">' + currentLine.Description + '</span>' +
      '<span>Color</span>' +
    '</div>' +
  '</td>' +
  '<td width="20%">' +
    '<div class="text-right">' +
      '<span class="font-weight-bold">£' + currentLine.Price.toFixed(2) + '</span>' +
    '</div>' +
  '</td>' +
'</tr>';

另外注意你贴的示例JSON里，两个OrderLines对象之间缺了一个逗号，实际使用时要保证返回的JSON格式合法，否则会直接解析失败。

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