JavaScriptはデータをHTMLテーブルに動的に取り込みます

Question

テーブルセルにデータを動的に取り込みしようとしています。私はこれに続いたJSfiddle example。ここで

は私のコードです：

var heading = new Array(); 
     heading[0] = "Type" 
     heading[1] = "Item Name" 
     heading[2] = "Brand" 
     heading[3] = "Unit Price" 
     heading[4] = "Quantity" 

     var stock = new Array(); 
     for(var i = 0; i < topProductList.length; i++){ 
      stock[0].push(topProductList[i].type); 
      stock[1].push(topProductList[i].itemName); 
      stock[2].push(topProductList[i].brand); 
      stock[3].push(topProductList[i].unitprice); 
      stock[4].push(topProductList[i].quantity); 

      console.log(topProductList[i].type + ' ' + topProductList[i].itemName + ' ' + topProductList[i].brand + ' ' + topProductList[i].unitprice + ' ' + topProductList[i].quantity); 
     } 

私は私の配列をループして、各列のデータを追加しようとしました。しかし、私はCannot read property 'push' of undefinedを取得しています。 console.logを印刷して、正しく取得しているかどうかを確認し、データの取得に問題はないかどうかを確認しました。それぞれのデータを列に追加しようとしたときに問題が発生している部分です。

アイデア？ topProductListため

サンプルデータ：

var topProductList = [{type: 'home appliance', name: 'Sound Teoh Tv Cable 5m Hl3599 Soundteoh', unitprice: 9.90, quantity: 5}, 
{type: 'kitchen appliance', name: ' Powerpac Mini Rice Cooker Pprc09 Powerpac', unitprice: 19.90, quantity: 5}, 
{type: 'kitchen appliance', name: ' Sona 2-slice Bread Toaster Sto2201 Sona', unitprice: 39.90, quantity: 5}, 
{type: 'home appliance', name: ' Simply Living. 10" Wall Clock Simply Living', unitprice: 9.90, quantity: 5}, 
{type: 'kitchen appliance', name: ' Morries Pie Maker Ms-8028pm Morries', unitprice: 29.90, quantity: 4}]; 

Answer 1

あなたstock変数が配列ではなくstock[0]です。

は自分の在庫が多次元配列であるようにコメントした後の編集**

が見えます**

stock.push(); 

または直接れたまま

stock[0] = topProductList[i].type; 

にインデックスにその値を設定を行います。あなたはjsfiddle例と一緒に従っているならば、その場合には、ちょうど

stock[0] = new Array(topProductList[i].type); 

Answer 2

AS-配列要素にはpushはありませんか。ただし、配列にはpushを使用できます。 this exampleを確認してください。ここで

Answer 3

あなたはarrayのarrayで stock.push("abc");

あなたstock変数で買いだめした値（配列）をプッシュする必要がありhttp://jsfiddle.net/4pEJB/488/

function addTable() { 
 
    var myTableDiv = document.getElementById("metric_results") 
 
    var table = document.createElement('TABLE') 
 
    var tableBody = document.createElement('TBODY') 
 

 
    table.border = '1' 
 
    table.appendChild(tableBody); 
 

 
    var heading = new Array(); 
 
    heading[0] = "Type" 
 
    heading[1] = "Item Name" 
 
    heading[2] = "Unit Price" 
 
    heading[3] = "Quantity" 
 

 

 
    var stock = new Array() 
 
    var topProductList = [{type: 'home appliance', name: 'Sound Teoh Tv Cable 5m Hl3599 Soundteoh', unitprice: 9.90, quantity: 5}, 
 
{type: 'kitchen appliance', name: ' Powerpac Mini Rice Cooker Pprc09 Powerpac', unitprice: 19.90, quantity: 5}, 
 
{type: 'kitchen appliance', name: ' Sona 2-slice Bread Toaster Sto2201 Sona', unitprice: 39.90, quantity: 5}, 
 
{type: 'home appliance', name: ' Simply Living. 10" Wall Clock Simply Living', unitprice: 9.90, quantity: 5}, 
 
{type: 'kitchen appliance', name: ' Morries Pie Maker Ms-8028pm Morries', unitprice: 29.90, quantity: 4}]; 
 
    
 

 
    for(var i = 0; i < topProductList.length; i++){ 
 
     var temp = []; 
 
     temp.push(topProductList[i].type); 
 
     temp.push(topProductList[i].name); 
 
     temp.push(topProductList[i].unitprice); 
 
     temp.push(topProductList[i].quantity); 
 
     stock.push(temp); 
 
    } 
 

 
    //TABLE COLUMNS 
 
    var tr = document.createElement('TR'); 
 
    tableBody.appendChild(tr); 
 
    for (i = 0; i < heading.length; i++) { 
 
     var th = document.createElement('TH') 
 
     th.width = '75'; 
 
     th.appendChild(document.createTextNode(heading[i])); 
 
     tr.appendChild(th); 
 
    } 
 

 
    //TABLE ROWS 
 
    for (i = 0; i < stock.length; i++) { 
 
     var tr = document.createElement('TR'); 
 
     for (j = 0; j < stock[i].length; j++) { 
 
      var td = document.createElement('TD') 
 
      td.appendChild(document.createTextNode(stock[i][j])); 
 
      tr.appendChild(td) 
 
     } 
 
     tableBody.appendChild(tr); 
 
    } 
 
    myTableDiv.appendChild(table) 
 
}

<div id="metric_results"> 
 
    <input type="button" id="create" value="Click here" onclick="Javascript:addTable()"> 
 
</div>

で行きます。 インナーarrayはarray外側としては行レベルのデータあるカラムレベルデータを含んでいます。

さらにコードの行数を減らすには、以下のコードでforループを置き換えます。

var keys = Object.keys(topProductList[0]); 
for(var i = 0; i < topProductList.length; i++){ 
    var temp = []; 
    for(var key in keys){ 
    temp.push(topProductList[i][keys[key]]); 
    } 
    stock.push(temp); 
} 

Answer 4

stock[0]はあなたがtopProductListのために、この

var stock = [ [], [], [], [], [], [] ];