JSON 数组到 HTML 表中

Question

寻找一种解决方案来实现一个 HTML 表格，该表格从 JSON 文件中获取“标题”并将其放在 2 列表格的第一列中，第二列有“描述”。

描述必须像项目符号一样分层，因为它是 JSON 文件中数组中的一个数组。目前它的工作方式是它是第二列中的一大块数据，看起来像一个巨大的句子。我已经尝试将每个要点放入其单独的密钥对中，但这不可行，因为它很耗时。是否有用于迭代数组中数组的 if 语句的选项？打开其他脚本替代方案。

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>';
      list += '<td>'+value.description+'</td>'
      list += '</tr>';
    });
    $('#table1').append(list);
});

<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>

Answer 1

您当前的方法很好。您只需在$.each 中添加$.each：

$(document).ready(function () {
    $.getJSON("data.json", function (data) {
        var list = '';
        $.each(data, function (key, value) {
            list += '<tr><td>' +
                value.title +
                '</td><td><ul>';
            $.each(value.description, function (key, value) {
                list += "<li>" + value + "</li>";
            })
            list += '</ul></td></tr>';
        });
        $('#table1').append(list);
    });
});

var data = [{
    "title": "title1",
    "description": ["description1", "description2"]
  },
  {
    "title": "title2",
    "description": ["description3", "description4"]
  }
]

$(document).ready(function() {
  var list = '';
  $.each(data, function(key, value) {
    list += '<tr><td>' +
      value.title +
      '</td><td><ul>';
    $.each(value.description, function(key, value) {
      list += "<li>" + value + "</li>";
    })
    list += '</ul></td></tr>';
  });
  $('#table1').append(list);
});

<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>

编辑：改进版： JSFiddle