JavaScript populate data dynamically into HTML table

Question

I am trying to populate table cells with data dynamically. I followed this JSfiddle example .

Here is my code:

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);
        }

I tried to add the data for each column by looping through my array. However, I am getting Cannot read property 'push' of undefined . I printed out the console.log to check if I am retrieving correctly and the data retrieval has no problem. It is just that the part when I tried to add each data into column is encountering problem.

Any ideas?

Sample data for the 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

Your stock variable is an array but not the stock[0] ;

just do

stock.push();

or directly set that value on index on as-

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

** Edit after comments **

looks like your stock is a multi dimension array. In that case, if you are follow along with jsfiddle example, just do as-

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

Answer 2

There is no push for an array element. However, you can use push with an array. Please check this example .

Answer 3

Here you go with a 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> 

You need to push a value (array) to stock by stock.push("abc");

Your stock variable in an array of array . Inner array contains column level data , where as outer array is row level data .

One more way to reduce the number of lines of code, replace the for loop by below code.

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]未定义，您需要像这样初始化数组

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