使用id、name、price数组生成HTML表格，代码运行异常如何排查

• 遍历逻辑错误：当前data是包含三个独立数组的对象，而非每行数据组成的对象数组，直接使用$.each(data)遍历拿到的是id/name/price对应的完整数组，无法拿到每行对应位置的字段值
• 额外问题：代码中将name字段作为图片路径写入img标签的src属性，如果需求是直接显示name文本，不需要加img标签

JS 代码 #

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
// 按id数组的长度遍历，取每个下标对应的三个字段值
for(var i = 0; i < data.id.length; i++){
  table += '<tr>';
  table += '<td>' + data.id[i] + '</td>';
  // 如果确实需要展示图片，替换上一行下面的代码为：
  // table += '<td><img src="' + data.name[i] + '" alt="' + data.name[i] + '"></td>';
  table += '<td>' + data.name[i] + '</td>';
  table += '<td>' + data.price[i] + '</td>';
  table += '</tr>';
}
table += '</table>'; 
$('#tableContainer').html(table);

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

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