如何解析JSON API链接到HTML表

时间:2019-05-24 21:36:55

标签: json api

我正在尝试将API json文件解析为HTML表,我在此处发布了JSON API文件的内容以供参考:https://pastebin.com/raw/jWaET2TU

首先,我想简化一下,只有3个值。

ID | NAME |说明

我可以打印所有数据,然后当我尝试获取单个值或出现错误或空白页时。

这是我到目前为止所拥有的全部,但是无法弄清楚代码中有什么问题。

.HTML

<table id="personDataTable">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>DESCRIPTION</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}   
</style>

.JS

$.ajax({
    url: 'https://apiexample.com',
    type: "get",
    dataType: "json",

    success: function(data) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); 
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.name + "</td>"));
    row.append($("<td>" + rowData.headline + "</td>"));
}

0 个答案:

没有答案