如何将JSON数组转换为含项目符号描述列的HTML表格？

完全明白你的需求——咱们不用把每个description项拆成独立键值对，直接通过遍历嵌套数组就能轻松实现项目符号列表，避免文本堆叠的问题。

问题根源 #

你当前的代码里直接把value.description拼接到<td>中，数组会被默认转换成逗号分隔的字符串，自然会堆成大段文字。咱们只需要对这个嵌套的description数组再做一次遍历，生成<ul>和<li>元素就行。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="table1">
 <tr>
 <th>Title</th>
 <th>Description</th>
 </tr>
</table>

<script>
var data = [
 { "title": "title1", "description":["description1","description2"] },
 { "title": "title2", "description":["description3","description4"] }
]
$(document).ready(function(){
 var list = '';
 $.each(data, function(key, value){
 list += '<tr>';
 list += '<td>'+value.title+'</td>';
 // 处理description数组，生成项目列表
 var descHtml = '<ul>';
 $.each(value.description, function(descKey, descValue){
   descHtml += '<li>' + descValue + '</li>';
 });
 descHtml += '</ul>';
 list += '<td>'+descHtml+'</td>'
 list += '</tr>';
 });
 $('#table1').append(list);
});
</script>

关键说明 #

• 我们在遍历主数据数组的同时，对每个对象的description数组再做一次$.each循环，把每个描述项包装成<li>标签，外面再套上<ul>来实现项目符号列表。
• 这种方式完全不需要手动拆分数组为独立键值对，代码简洁高效，也完全符合你想用遍历嵌套数组的思路。

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