Ajax APIコールテーブル集団

Question

htmlテーブルの1つのタグにapiレスポンスを表示できます。しかし、私はテーブルに応答の別の部分を追加しようとしています。私は...ここ

$('<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" 
     }, 
    } 
} 

を

$.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)); 

を壁にヒットしているとHTML ...

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

Answer 1

これは、初期化中です変数tr inループ。したがって、新しい値を割り当てて古い値を消去します。各ループの外側に宣言してください。

ここ

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

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

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

下にしてみてくださいJSBin