/    Sign up×
Community /Pin to ProfileBookmark

Placing arrays into a table PLEASE HELPP!!

Copy linkTweet thisAlerts:
Apr 27.2014

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

}

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@ShrineDesignsApr 27.2014 — I suggest making your data a multi-dimensional array, if possible. example: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:var products = [
// ...
];

/* added for testing purposes...
for (var i = 0; i &lt; 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');

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

<i> </i> if (i &lt; len) {
<i> </i> td.innerHTML = '&lt;div&gt;' +products[i].name+ '&lt;/div&gt;'
<i> </i> + '&lt;div&gt;$' +products[i].price.toFixed(2)+ '&lt;/div&gt;'
<i> </i> + '&lt;div&gt;' +products[i].id+ '&lt;/div&gt;';
<i> </i> }
<i> </i> tr.appendChild(td);
<i> </i>}
<i> </i>return table;
}
window.onload = function()
{
var node = makeCatalogueTable();

<i> </i>if (node)
<i> </i> document.body.appendChild(node);
};
Copy linkTweet thisAlerts:
@jedaisoulApr 27.2014 — 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
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Table array test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?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 &amp; 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);
?&gt;
&lt;table&gt;
&lt;?php
$j = count($PRODUCT_LIST);
for($i=0;$i&lt;$j;$i++) { ?&gt;
&lt;tr&gt;
&lt;td style="width:300px;"&gt;&lt;?php echo $PRODUCT_LIST[$i]; ?&gt;&lt;/td&gt;
&lt;td style="width:100px;"&gt;&lt;?php echo $PRICE_LIST[$i]; ?&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;?php ;} ?&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;


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.
Copy linkTweet thisAlerts:
@snow_lifeauthorApr 27.2014 — 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!
Copy linkTweet thisAlerts:
@snow_lifeauthorApr 28.2014 — 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!
Copy linkTweet thisAlerts:
@Sup3rkirbyApr 28.2014 — The issue is simply in your products object. After code 5 you are missing a comma:
[CODE]
{code: 5[B][COLOR="#FF0000"],[/COLOR][/B] product: 'Coffee Capsule Holder', price:29.95},
[/CODE]

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}[B][COLOR="#FF0000"],[/COLOR][/B]
[/CODE]
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.
Copy linkTweet thisAlerts:
@snow_lifeauthorApr 30.2014 — 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!!!
Copy linkTweet thisAlerts:
@jedaisoulApr 30.2014 — 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:

[i]- 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.[/i]

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.
Copy linkTweet thisAlerts:
@Ay__351_eApr 30.2014 — 
&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
// 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 &amp; 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&lt;=PRODUCT_LIST.length; i++) {
A.push(i+1, PRODUCT_LIST[i], PRICE_LIST[i]);
}
//alert(A);
var tablo = '&lt;table&gt;&lt;tr&gt;';
for(var y=0; y&lt;12; y++) {
if(y%3==0) { tablo += '&lt;td style="background-color:DarkTurquoise;color:blue;" &gt;CODE&lt;/td&gt;';}
if(y%3==1) { tablo += '&lt;td style="background-color:pink;color:green;text-align:center;"&gt;PRODUCT&lt;/td&gt;';}
if(y%3==2) { tablo += '&lt;td style="background-color:purple;color:white;text-align:center;"&gt;PRICE&lt;/td&gt;';}
}
tablo += '&lt;/tr&gt;';
var n, t=0;
for(n=0; n&lt;10; n++) {
tablo += '&lt;tr&gt;';
for(k=0; k&lt;12; k++) {
if(k%3==0) { tablo += '&lt;td style="background-color:PaleTurquoise;color:#663399;text-align:center;"&gt;'+A[t]+'&lt;/td&gt;';}
if(k%3==1) { tablo += '&lt;td style="background-color:#def; color:#996633;text-align:center;"&gt;'+A[t]+'&lt;/td&gt;';}
if(k%3==2) { tablo += '&lt;td style="background-color:#edb; color:#336699;text-align:center;"&gt;$'+A[t]+'&lt;/td&gt;';}
//tablo += '&lt;td&gt;'+A[t]+'&lt;/td&gt;';
t++;
}
tablo += '&lt;/tr&gt;';
}
tablo += '&lt;/table&gt;';
var el= document.getElementById('liste');
el.innerHTML = tablo;
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="renderProductCatalogue ()"&gt;
&lt;div id="liste"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @snow_life spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...