Question

我能够在html表中的单个标签中显示api响应。但是，我正在尝试将另一部分响应添加到表中。我撞到了墙上......

$.ajax({
type: 'GET',
url: "api query url",
auth: "user:password",
dataType: "json",
crossDomain: true,
success: function(data) {
var list = data.list;
$.each(list, function(i, item) {
var tr = $('<tr>').append($('<td>').text(item.name));

这是我被困的地方......

$('<tr>').append($('<td>').text(item.playerStatus)); 
$("#scalaapi").append(tr);
});
}
})

以下是json响应的示例......

{
"list": [
    {
        "id": 30,
        "name": "Scala_Test Player",
        "playerStatus": "Active",
        "uuid": "f5672f69-be76-4057-8a46-68fa4ba9dda8",
        "previewPlayer": false,
        "enabled": true,
        "mac": "00-00-00-00-00-00",
        "type": "CHROMEBOX",
        "distributionServer": {
            "id": 2,
            "name": "Main",
            "driver": "IP_P2P"
        },
    }
}

和HTML ......

<section class="reports">
<div id="output">
    <table id="scalaapi">
    <tbody>
    <tr><td></td><td></td></tr>
    </tbody>
    </table>
</div>
</section>

Answer 1

那是因为你在循环中初始化变量tr。因此，它为其分配新价值并抹去旧价值。在每个循环中将其声明为外部。

请尝试以下

$.each(val, function(i, item) {

       tr = $('<tr>').append('<td>' + (item.name) + '</td>' + 
                             '<td>' + (item.playerStatus) + '</td>');

       $("#scalaapi").append(tr);
  });

以下是JSBin

的链接

Ajax api调用表填充

1 个答案: