Question

这是我拥有的json文件，基本上我想基于这个例子的id创建表，id：50应该在一个表中显示，其中id：57应该在另一个表中显示在同一个

 {
    "version": "5.2",
    "user_type": "online",
    "user":
    [
        {
            "name": "John",
            "id": 50
        },
        {
            "name": "Mark",
            "id": 50
        },
       {
            "name": "Mark",
            "id": 57
       }
   ]
}

用于生成表的代码

<script type="text/javascript">
$(document).ready(function(){
$.ajax({
    url: "http://PATH/user.json",
    dataType: 'json',
    type: 'get',
    cache:false,
    success: function(data){
        /*console.log(data);*/
        $('<tr><td colspan="3"><b>Heading ONE</b></td></tr>').insertBefore('table > thead > tr:first');
        var event_data = '';
        $.each(data.user, function(index, value){
            /*console.log(value);*/
            event_data += '<tr>';
            event_data += '<td>'+value.name+'</td>';
            event_data += '<td>'+value.id+'</td>';
            event_data += '</tr>';
        });
        $("#list_table_json").append(event_data);
    },
    error: function(d){
        /*console.log("error");*/
        alert("404. Please wait until the File is Loaded.");
    }
});
});
</script>

我如何获得两张桌子？或者应该改变json

输出结果是id 50，57是同一个表

Answer 1

请查看 FIDDLE 。

<div id="list_table_json">

</div>

我在我的代码中直接使用了JSON，在AJAX中确保首先使用$.parseJSON解析JSON。

var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}");

var table;
$.each(data.user, function(key, value) {
  var row = $("<tr/>");

  if ($('table#main_table_' + value.id).length)
    table = $("#main_table_" + value.id);
  else
    table = $('<table></table>');
  table.attr('id', 'main_table_' + value.id);

  row.append($("<td/>").text(value.name));
  row.append($("<td/>").text(value.id));

  table.append(row);

  $("#list_table_json").append(table);
  $("#list_table_json").append("<br>");
});

Answer 2

尝试 jsonToTable（）：

<div id="list_50_table"></div>
<hr/>
<div id="list_57_table"></div>


function jsonToTable(data) {
  var table = $('<table></table>');
  $(data).each(function (i, rowData) {
    var row = $('<tr></tr>');
    $(rowData).each(function (j, cellData) {
      row.append($('<td>'+cellData.name+'</td>'));
      row.append($('<td>'+cellData.id+'</td>'));
    });
    table.append(row);
  });
  return table;
}
$('#list_50_table').append(jsonToTable(data.user.filter(item => item.id === 50)))
$('#list_57_table').append(jsonToTable(data.user.filter(item => item.id === 57)))

试试这个：

<script type="text/javascript">
$(document).ready(function(){
$.ajax({
    url: "http://PATH/user.json",
    dataType: 'json',
    type: 'get',
    cache:false,
    success: function(data){
       if(data && data !== " ") {
         $("#list_table_json").append(jsonToTable(data.user.filter(item => item.id === 50)));
         $("#list_table_json").append(jsonToTable(data.user.filter(item => item.id === 57)));
       } else {
          /*console.log("Sorry!");*/
          alert("Sorry no data found!");
       }
    },
    error: function(d){
        /*console.log("error");*/
        alert("404. Please wait until the File is Loaded.");
    }
});
});
</script>

json基于key的html表

2 个答案: