用数据表显示 json 数据答案

【问题标题】：display json data with datatable用数据表显示 json 数据
【发布时间】：2020-11-01 03:01:18
【问题描述】：

我在 javascript 中遇到问题。我想在具有特定列的数据表中显示get url data。

我该怎么办？有人帮我吗？

我的代码：我尝试了，但它不起作用

if (data.status === 200) {
  var response = JSON.parse(data.response);      //success
  bindtoDatatable(response);         
}


function bindtoDatatable(response) {               
      console.log(response[0].summary);  //console data
      var table = $('#table_id').dataTable({
      "data": response[0].summary,
      "columns" : [                      //columns data are not shown
      { "data": "created_at" },
      { "data": "file_name" },
      ]
      })
}

    <table id="table_id" class="display">
    <thead>
    <tr>
    <th>Date</th>
    <th>Filename</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>

请检查get api url

获取网址 = https://globemed.codupcloud.com/public/user/10/summary

json 数据：

[
    {
        "summary": {
            "id": 3,
            "user_id": "10",
            "file_name": "demo.xlsx",
            "template_name": "test",
            "success": "0",
            "fail": "0",
            "created_at": "2020-07-10 14:02:13",
            "updated_at": "2020-07-10 14:02:13"
        }
   }
]

【问题讨论】：

标签： javascript html jquery json datatable

【解决方案1】：

我为您的问题创建了一个完整的示例。您可以根据需要进行修改。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

</head>

<body>
    <table id="my-table" border="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>User ID</th>
                <th>File name</th>
                <th>Template name</th>
                <th>Success</th>
                <th>Fail</th>
                <th>Created at</th>
                <th>Updated at</th>
            </tr>
        </thead>


    </table>

    <script type="text/javascript" charset="utf-8">
        var responseList = [{
            "summary": {
                "id": 3,
                "user_id": "10",
                "file_name": "demo.xlsx",
                "template_name": "test",
                "success": "0",
                "fail": "0",
                "created_at": "2020-07-10 14:02:13",
                "updated_at": "2020-07-10 14:02:13"
            }
        }];


        var table = document.querySelector('#my-table');
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);


        for (var i = 0; i < responseList.length; i++) {

            var tr = tbody.insertRow();

            var summary = responseList[i]["summary"];
            console.log(summary);
            for (var key in summary) {
                if (summary.hasOwnProperty(key)) {
                    console.log(key + " -> " + summary[key]);
                    var td = tr.insertCell();
                    td.innerHTML = summary[key];
                    
                }
            }
        }
    </script>
</body>

</html>

【讨论】：

好的，谢谢我试试@
我问一件事@