jqueryのappendメソッドは最後に追加された要素のみを表示しています

Question

jsonリクエストからテーブルにデータを追加しようとしています。何を試してみても、私は表示するために複数のテーブル行を取得することはできません。どんな助けもありがとう。 JSFiddle

HTML：

<div class="col-lg-6"> 
    <h2>Table</h2> 
    <table class="table" id="products-table"> 
     <thead> 
      <tr> 
       <th>ASIN</th> 
       <th>Title</th> 
       <th>Price</th> 
       <th>MPN</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr></tr> 
     </tbody> 
    </table> 
</div> 

はjavascript：

var prodAry = [1, 2, 3]; 
// create elements for table 
var $tr = $('<tr>'); 
var $asin = $('<td>'); 
var $title = $('<td>'); 
var $price = $('<td>'); 
var $mpn = $('<td>'); 

prodAry.forEach(function(product, i) { 
    var $newAsin = $asin.text(i); 
    var $newTitle = $title.text(i); 
    var $newPrice = $price.text(i); 
    var $newMpn = $mpn.text(i); 
    var $newTr = $tr.append($newAsin, $newTitle, $newPrice, $newMpn); 
    $('#products-table > tbody:last-child').append($newTr); 
}); 

Answer 1

あなたの現在の実装を1として、あなたは連続して同じ$tr要素を追加しています。

forEachループ内に要素を作成する必要があります。

var prodAry = [1, 2, 3]; 
prodAry.forEach(function(product, i) { 
    // create elements for table 
    var $tr = $('<tr>'); 
    var $asin = $('<td>'); 
    var $title = $('<td>'); 
    var $price = $('<td>'); 
    var $mpn = $('<td>'); 

    var $newAsin = $asin.text(i); 
    var $newTitle = $title.text(i); 
    var $newPrice = $price.text(i); 
    var $newMpn = $mpn.text(i); 
    var $newTr = $tr.append($newAsin, $newTitle, $newPrice, $newMpn); 
    $('#products-table > tbody:last-child').append($newTr); 
}); 

Updated Fiddle

Answer 2

console.log($newTr[i]); 

ライン15の後にこれを追加すると、問題が表示されます。