www.webdeveloper.com
Results 1 to 9 of 9

Thread: Placing arrays into a table PLEASE HELPP!!

  1. #1
    Join Date
    Apr 2014
    Posts
    4

    Placing arrays into a table PLEASE HELPP!!

    Trying to put these arrays into a table and am getting stuck and cant figure out what do do next? Any help would be awesome! thanks!!

    THis is the code i have so far

    What i need is a table of 12 columns and 11 rows showing: Code (as in the index of the product and price) and then product and then price. So it would be code,product,price,code,product,price,code,product,price,code,product,price

    if that makes sense....



    PRODUCT_LIST = 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');
    PRICE_LIST = 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);


    function renderProductCatalogue () {
    for(i=0,i<PRODUCT_LIST.length;i++);

    }
    Last edited by snow_life; 04-27-2014 at 04:01 AM.

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    I suggest making your data a multi-dimensional array, if possible. example:
    Code:
    var products = [
        {id: 1, name: 'Salad Server Set', price: 18.7},
        {id: 2, name: 'Party Serviette Holder', price: 11.95},
        // ...
        {id: 40, name: 'Pop Container', price: 22.95}
    ];
    Here is a single loop example of building a table:
    Code:
    var products = [
    	// ...
    ];
    
    /* added for testing purposes...
    for (var i = 0; i < 40; ++i) {
    	products.push({id: (i+1), name: 'test', price: 1});
    }*/
    function makeCatalogueTable()
    {
    	var cols = 12, // number of columns
    		len = products.length,
    		size = Math.ceil(len / cols) * cols, // normalizes cell count
    		table = document.createElement('table');
    
    	for (var i = 0; i < size; ++i) {
    		if (i % cols === 0)
    			var tr = table.appendChild(document.createElement('tr'));
    		var td = document.createElement('td');
    
    		if (i < len) {
    			td.innerHTML = '<div>' +products[i].name+ '</div>'
    				+ '<div>$' +products[i].price.toFixed(2)+ '</div>'
    				+ '<div>' +products[i].id+ '</div>';
    		}
    		tr.appendChild(td);
    	}
    	return table;
    }
    window.onload = function()
    {
    	var node = makeCatalogueTable();
    
    	if (node)
    		document.body.appendChild(node);
    };

  3. #3
    Join Date
    Mar 2012
    Posts
    1,509
    I can't help you with JavaScript, but I'd suggest that this sort of app should be written in PHP (or other server-side language), not client-side. So as an exercise in using JS arrays, this is fine, but if you were thinking of developing a live site, you'd be better off doing it in PHP. That way you'd eventually be able to replace the array with an SQL database, whilst retaining most of the code you'd already written. So to do this in PHP, I'd do it something like:

    TEST.PHP
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Table array test</title>
    </head>
    <body>
    <?php
    $PRODUCT_LIST = 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');
    
    $PRICE_LIST = 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);
    ?>
    <table>
    <?php
    $j = count($PRODUCT_LIST);
    for($i=0;$i<$j;$i++) { ?>
    <tr>
    <td style="width:300px;"><?php echo $PRODUCT_LIST[$i]; ?></td>
    <td style="width:100px;"><?php echo $PRICE_LIST[$i]; ?></td>
    </tr>
    <?php ;} ?>
    </table>
    </body>
    </html>
    P.S. PHP, being a server-side language requires a server to run on. So if you want to test this code without putting on a live server, you need to set up a local host. I use Wampserver, it's free and the set up is automated.
    Last edited by jedaisoul; 04-27-2014 at 05:19 AM.

  4. #4
    Join Date
    Apr 2014
    Posts
    4
    Thanks for the help guys! This is for a uni assignment so has to be in Javascript but thanks anyway!
    I am an absolute cabbage at Javascript as this is the first time i have had to use it so completely in the dark so this will help thanks!

  5. #5
    Join Date
    Apr 2014
    Posts
    4
    Had a go at using your code to create my table. Had to change a few names such as the id changed to code as thats what the brief has, i still cant seem to get it to produce the table am i missing something? This is the code i have:

    var products = [
    {code: 0, product: 'Salad Server Set', price: 18.7},
    {code: 1, product: 'Party Serviette Holder', price: 11.95},
    {code: 2, product: 'Tea set', price: 39.95},
    {code: 3, product: 'Mixing Bowl Set', price:49.95},
    {code: 4, product: 'Knife Block Set', price:99.95},
    {code: 5 product: 'Coffee Capsule Holder', price:29.95},
    {code: 6, product: 'Plastic Sensor Soap Pump', price:79.95},
    {code: 7, product: 'Storage Bucket', price:24.95},
    {code: 8, product: 'Oven Glove', price:9.95},
    {code: 9, product: 'Apron', price:29.95},
    {code: 10, product: 'Biscuit Barrel', price:39.95},
    {code: 11, product: 'Chopping Board', price:12.95},
    {code: 12, product: 'Carioca Cups', price:54.95},
    {code: 13, product: 'Soup Bowls', price:43.00},
    {code: 14, product: 'Elevate Wood Turner', price:19.95},
    {code: 15, product: 'Pasta Machine', price:144.95},
    {code: 16, product: 'Teapot', price:29.95},
    {code: 17, product: 'Cake Pop Scoop', price:9.95},
    {code: 18, product: 'Cookbook Stand', price:29.95},
    {code: 19, product: 'Chocolate Station', price:34.95},
    {code: 20, product: 'Coffee Maker', price:29.00},
    {code: 21, product: 'Pepper Mill', price:84.94},
    {code: 22, product: 'Salt Mill', price:84.95},
    {code: 23, product: 'Glass Storage Jar', price:4.95},
    {code: 24, product: 'Measuring jug', price:19.95},
    {code: 25, product: 'Kitchen Scale', price:39.95},
    {code: 26, product: 'Tenderiser', price:34.95},
    {code: 27, product: 'Pizza Docker', price:19.95},
    {code: 28, product: 'Knife Sharpener', price:79.95},
    {code: 29, product: 'Steel Cork Opener', price:36.95},
    {code: 30, product: 'Steel Garlic Press', price:34.95},
    {code: 31, product: 'Steel Can Opener', price:36.95},
    {code: 32, product: 'Stainless Steel Crank Flour Sifter', price:33.95},
    {code: 33, product: 'Mineral Stone Mortar and Pestle', price:74.95},
    {code: 34, product: 'Citrus Cather', price:19.95},
    {code: 35, product: 'Cherry & Olive Pitter', price:27.95},
    {code: 36, product: 'Multi Grater-Detachable', price:26.95},
    {code: 37, product: 'Stainless Steel Colander', price:44.95},
    {code: 38, product: 'Steel Pizza Pan', price:12.95},
    {code: 39, product: 'Pop Container', price:22.95},
    ];

    function renderProductCatalogue()
    {
    var cols = 12, // number of columns
    len = products.length,
    size = Math.ceil(len / cols) * cols, // normalizes cell count
    table = document.createElement('table');

    for (var i = 0; i < size; ++i) {
    if (i % cols === 0)
    var tr = table.appendChild(document.createElement('tr'));
    var td = document.createElement('td');

    if (i < len) {
    td.innerHTML = '<div>' +products[i].product+ '</div>'
    + '<div>$' +products[i].price.toFixed(2)+ '</div>'
    + '<div>' +products[i].code+ '</div>';
    }
    tr.appendChild(td);
    }
    return table;
    }
    window.onload = function()
    {
    var node = renderProductCatalogue();

    if (node)
    document.body.appendChild(node);
    };


    any help would be awesome thanks!

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    The issue is simply in your products object. After code 5 you are missing a comma:
    Code:
    {code: 5, product: 'Coffee Capsule Holder', price:29.95},
    Also, while the code will work at this point, you also have an extra uncessary comma after the last item (code 39):
    Code:
    {code: 39, product: 'Pop Container', price:22.95},
    Again, the code will run once the first issue is fixed, but for the sake of coding standards you should remove the comma highlighted above for the last item.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Apr 2014
    Posts
    4
    Could anyone help with writing some more code.??

    So lost..
    What im trying to do is make a shopping cart to add items from the table

    What i need is to:
    - write a program to prompt for user to input the code of the item they want to add which is between 0-39 from the table.
    - then needs to validate the code and alert an error if they do not put in a valid code
    - then it needs to prompt for the quantity
    - then need to handle that product code, and check to ensure it's valid then a few if statements like checking if it's a real number, greater than 0, and not greater than the product list count
    - then it says assuming that its all valid add it to the cart by storing the values in separate arrays. so add the code and quantity to the cart.
    - then need to check product codes and quantities.
    - need to check that the quantity is less than 100 or it is not valid
    and then create a button that prompts for the code and then asks for the quantity.

    I have been told theres a lot better ways to do this but this is the way i need to do it for the assignment unfortunately..

    This is a massive headache for me if anyone can make sense of it an can write something for it would be hugely appreciative cause i am just starting to learn code and i am having a lot of trouble.

    Thanks!!!

  8. #8
    Join Date
    Mar 2012
    Posts
    1,509
    You already have a breakdown of what you need to do. I would suggest that you take it step by step and solve each issue one at a time. like:

    - write a program to prompt for user to input the code of the item they want to add which is between 0-39 from the table.

    All that requires is an INPUT field with maxlength set to 2, with a label "code (0-39)" and a submit button. Alternatively, use a SELECT box with values 0 to 39 and a submit button. Either will do.
    Last edited by jedaisoul; 04-30-2014 at 02:49 PM.

  9. #9
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?293873-Placing-arrays-into-a-table-PLEASE-HELPP!!
    //alert(0%3); //0
    var PRODUCT_LIST = 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 PRICE_LIST = 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);
    
    function renderProductCatalogue () {
    var  A=[];
    var i, s, k;
    for(i=0; i<=PRODUCT_LIST.length; i++) {
    A.push(i+1, PRODUCT_LIST[i], PRICE_LIST[i]); 
    }
    //alert(A);
    var tablo = '<table><tr>';
    for(var y=0; y<12; y++) {
      if(y%3==0) { tablo += '<td style="background-color:DarkTurquoise;color:blue;" >CODE</td>';}
      if(y%3==1) { tablo += '<td style="background-color:pink;color:green;text-align:center;">PRODUCT</td>';}
      if(y%3==2) { tablo += '<td style="background-color:purple;color:white;text-align:center;">PRICE</td>';}
    }
    tablo += '</tr>';
    var n, t=0;
    for(n=0; n<10; n++) {
    tablo += '<tr>';
      for(k=0; k<12; k++) {
      if(k%3==0) { tablo += '<td style="background-color:PaleTurquoise;color:#663399;text-align:center;">'+A[t]+'</td>';}
      if(k%3==1) { tablo += '<td style="background-color:#def; color:#996633;text-align:center;">'+A[t]+'</td>';}
      if(k%3==2) { tablo += '<td style="background-color:#edb; color:#336699;text-align:center;">$'+A[t]+'</td>';}
      //tablo += '<td>'+A[t]+'</td>';
      t++;
      }
    tablo += '</tr>';
    }
    tablo += '</table>';
    var el= document.getElementById('liste');
    el.innerHTML = tablo;
    }
    
    </script>
    </head>
    <body onload="renderProductCatalogue ()">
    <div id="liste"></div>
    
    </body>
    </html>
    Last edited by Ayşe; 04-30-2014 at 06:26 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles