CODEWITHSUNDEEP
javascript
MillyG
MillyG

Reputation: 3

Tables - loops and arrays

I am tying to create a table like the one below but cannot get my information into the right columns/ rows. Any help would be much appreciated! Thanks!

enter image description here

my code is:

        //data provided by HomewareCity for shopping catalogue      
        var productListArr = new Array('Salad Server Set', 'Party Serviette Holder', 
            'Tea Set', 'Mixing Bowl Set', 'Knife Block Set', 'Coffee Capsule Holder', 
            'Plastic Sensor Soap Pump', 'Storage Bucket', 'Oven Glove', 'Apron', 
            'Biscuit Barrel', 'Chopping Board', 'Carioca Cups', 'Soup Bowls', 
            'Elevate Wood Turner', 'Pasta Machine', 'Teapot', 'Cake Pop Scoop', 
            'Cookbook Stand', 'Chocolate Station', 'Coffee Maker', 'Pepper Mill', 
            'Salt Mill', 'Glass Storage Jar', 'Measuring jug', 'Kitchen Scale', 
            'Tenderiser', 'Pizza Docker', 'Knife Sharpener', 'Steel Cork Opener', 
            'Steel Garlic Press', 'Steel Can Opener', 
            'Stainless Steel Crank Flour Sifter', 'Mineral Stone Mortar and Pestle', 
            'Citrus Cather', 'Cherry & Olive Pitter', 'Multi Grater-Detachable', 
            'Stainless Steel Colander', 'Steel Pizza Pan', 'Pop Container');
        var priceListArr = new Array(18.70, 11.95, 39.95, 49.95, 99.95, 29.95, 79.95, 24.95, 
            9.95, 29.95, 39.95, 12.95, 54.95, 43.00, 19.95, 144.95, 29.95, 9.95, 
            29.95, 34.95, 29.00, 84.94, 84.95, 4.95, 19.95, 39.95, 34.95, 19.95, 
            79.95, 36.95, 34.95, 36.95, 33.95, 74.95, 19.95, 27.95, 26.95, 44.95, 
            12.95, 22.95);
        var orderedProductCodeArr = new Array [];
        var quantityArr = new Array ();         
document.write('<table width="80%" height="150px" cellpadding="2px" cellspacing="3px" border="1">');
for(var i=0; i<orderedProductCodeArr.length; i++)

document.write('<tr><th>Code</th></tr')
document.write('<tr><th>Product</th></tr');
document.write('<tr><th>Price</th></tr')

{
document.write('<tr><td>' + orderedProductCodeArr[i] + '</td></tr>');
}
document.write('</table') 
for(var i=0; i<priceListArr.length; i++)
{
document.write('<tr><td>' + priceListArr[i] + '</td></tr>');
}
document.write('</table')

Upvotes: 0

Views: 67

Answers (3)

R.W
R.W

Reputation: 560

This will help you do it. You can set the number of times you wish to repeat the set of columns (side by side) by altering the value of the 'repeat' variable. Also it will validate and only display items that has a price in priceListArr. This will help you from errors that may result if you don't have matching number of items in products and price list

var productListArr = new Array('Salad Server Set', 'Party Serviette Holder',
    'Tea Set', 'Mixing Bowl Set', 'Knife Block Set', 'Coffee Capsule Holder',
    'Plastic Sensor Soap Pump', 'Storage Bucket', 'Oven Glove', 'Apron',
    'Biscuit Barrel', 'Chopping Board', 'Carioca Cups', 'Soup Bowls',
    'Elevate Wood Turner', 'Pasta Machine', 'Teapot', 'Cake Pop Scoop',
    'Cookbook Stand', 'Chocolate Station', 'Coffee Maker', 'Pepper Mill',
    'Salt Mill', 'Glass Storage Jar', 'Measuring jug', 'Kitchen Scale',
    'Tenderiser', 'Pizza Docker', 'Knife Sharpener', 'Steel Cork Opener',
    'Steel Garlic Press', 'Steel Can Opener',
    'Stainless Steel Crank Flour Sifter', 'Mineral Stone Mortar and Pestle',
    'Citrus Cather', 'Cherry & Olive Pitter', 'Multi Grater-Detachable',
    'Stainless Steel Colander', 'Steel Pizza Pan', 'Pop Container');

var priceListArr = new Array(18.70, 11.95, 39.95, 49.95, 99.95, 29.95, 79.95, 24.95,
    9.95, 29.95, 39.95, 12.95, 54.95, 43.00, 19.95, 144.95, 29.95, 9.95,
    29.95, 34.95, 29.00, 84.94, 84.95, 4.95, 19.95, 39.95, 34.95, 19.95,
    79.95, 36.95, 34.95, 36.95, 33.95, 74.95, 19.95, 27.95, 26.95, 44.95,
    12.95, 22.95);

var orderedProductCodeArr = new Array (); // Not used
var quantityArr = new Array ();  // Not used

var repeat = 4; // Repeat a set of columns, this many times, side by side
var itemIndex = 0;

document.write('<table width="80%" height="150px" cellpadding="2px" cellspacing="3px" border="1">');

// Set the table header. We will repeat this based on how many 'sets' of tables we show
document.write('<tr>');
for (i = 0; i < repeat; i++) {
    document.write('<th>Code</th><th>Product</th><th>Price</th>');
}
document.write('</tr>');

for (var j = 0; j < productListArr.length; j += repeat) {
    document.write('<tr>');
    for (var m = 0; m < repeat; m++) {
        itemIndex = j + m;
        if ((productListArr[itemIndex] !== undefined) && (priceListArr[itemIndex] !== undefined)) {
            document.write('<td>' + itemIndex + '</td><td>' + productListArr[itemIndex] + '</td><td>' + priceListArr[itemIndex] + '</td>');
        }
    }
    document.write('</tr>');
}

document.write('</table>');

Upvotes: 0

brk
brk

Reputation: 50291

Hope this snippet will help

function _createTable(){
  var _getTable = document.getElementById('tableBody')
  var _tr = document.createElement('tr');
  for(var i=0;i<=priceListArr.length;i++){
    var _td0= document.createElement('td');
    var _td1= document.createElement('td');
    var _td2= document.createElement('td');
        _td0.textContent = i;
        _td1.textContent = productListArr[i];
        _td2.textContent = priceListArr[i];
     _tr.appendChild(_td0);
     _tr.appendChild(_td1);
     _tr.appendChild(_td2);


    if((_tr.children.length)%4 ===0){
     _getTable.appendChild(_tr); 
     _tr = document.createElement('tr');
    }
  }
}     

_createTable();

You can check this PLUNKER.

NOTE This snippet is tailor made & this may not work if the number of items in the array is not a multiple of 4. Example if array.length is 9 then only upto 8 elements will be shown

Upvotes: 0

Munawir
Munawir

Reputation: 3356

Like this ?

var productListArr = new Array('Salad Server Set', 'Party Serviette Holder', 
            'Tea Set', 'Mixing Bowl Set', 'Knife Block Set', 'Coffee Capsule Holder', 
            'Plastic Sensor Soap Pump', 'Storage Bucket', 'Oven Glove', 'Apron', 
            'Biscuit Barrel', 'Chopping Board', 'Carioca Cups', 'Soup Bowls', 
            'Elevate Wood Turner', 'Pasta Machine', 'Teapot', 'Cake Pop Scoop', 
            'Cookbook Stand', 'Chocolate Station', 'Coffee Maker', 'Pepper Mill', 
            'Salt Mill', 'Glass Storage Jar', 'Measuring jug', 'Kitchen Scale', 
            'Tenderiser', 'Pizza Docker', 'Knife Sharpener', 'Steel Cork Opener', 
            'Steel Garlic Press', 'Steel Can Opener', 
            'Stainless Steel Crank Flour Sifter', 'Mineral Stone Mortar and Pestle', 
            'Citrus Cather', 'Cherry & Olive Pitter', 'Multi Grater-Detachable', 
            'Stainless Steel Colander', 'Steel Pizza Pan', 'Pop Container');
        var priceListArr = new Array(18.70, 11.95, 39.95, 49.95, 99.95, 29.95, 79.95, 24.95, 
            9.95, 29.95, 39.95, 12.95, 54.95, 43.00, 19.95, 144.95, 29.95, 9.95, 
            29.95, 34.95, 29.00, 84.94, 84.95, 4.95, 19.95, 39.95, 34.95, 19.95, 
            79.95, 36.95, 34.95, 36.95, 33.95, 74.95, 19.95, 27.95, 26.95, 44.95, 
            12.95, 22.95);
        var orderedProductCodeArr = new Array ();
        var quantityArr = new Array ();         
document.write('<table width="80%" height="150px" cellpadding="2px" cellspacing="3px" border="1">');
document.write('<th>Code</th>');
document.write('<th>Product</th>');
document.write('<th>Price</th>');
for(var i=0; i<productListArr.length; i++){

document.write('<tr><td>' + i + '</td>');
document.write('<td>' + productListArr[i] + '</td>');
document.write('<td>' + priceListArr[i] + '</td></tr>');
}
document.write('</table>');

Upvotes: 1

Related Questions