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

您当前的方法很好。您只需要在Dogs内添加一个$.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);
});

编辑：改进版本： JSFiddle

JSON数组到HTML表中

1 个答案: