Ajax api table table population

Question

Я могу отображать ответ api в одном теге в таблице html. Тем не менее, я пытаюсь добавить еще одну часть ответа в таблицу. Я врезался в стену ...

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

Thats, потому что вы инициализируетесь переменная tr в цикле. Следовательно, он присваивает ему новое значение и стирает старые значения. Объявите его для каждого цикла.

Пожалуйста, попробуйте ниже

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

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

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

Вот ссылка на JSBin