javascript arrays inside an array

Question

the issue is .: in the following code ... when i call the method "addtocart" ... it prints correctly when the array has only one element .... but if it has more than 1 element it givs error as shown in the pic: (Ignore the first "404" error)

enter image description here

 var counter=0;
function addToCart(productName,productImageURL,productPrice)
{
alert("in addTOCART() method");
var cartArray=new Array();
cartArray[counter]=doTask(productName, productImageURL, productPrice);
//cartArray.concat(doTask(productName, productImageURL, productPrice));
/*cartArray.push(doTask(productName, productImageURL, productPrice));*/
alert("came back to original method");
alert(cartArray.length);
for ( var i = 0; i < cartArray.length; i++) {
 var array_element = cartArray[i];
 console.log(array_element.toString());
}
alert(cartArray.toString());
counter++;
}
function doTask(productName,productImageURL,productPrice)
{
alert("inside java script");
var cartItem = new Array();
itemName=productName;
itemPrice=productPrice;
alert(itemPrice);
itemImageURL=productImageURL;
quantity=prompt("Please enter the quantity","1");
quantity=parseInt(quantity);
alert(quantity+2);
if (!isNaN( quantity ))
{
 alert("yes its a number");
 alert(itemImageURL);
 alert(itemPrice);
 alert(quantity);
 alert(itemName);
 alert(itemImageURL);
 totalAmount=itemPrice*quantity;
 alert(totalAmount);
 cartItem.push(itemImageURL,itemName,itemPrice,quantity,totalAmount);
 //alert(cartItem.toString());
 console.log(cartItem.toString());
 return cartItem;
}

• Richard Neil Ilagan: All things aside, the indentations hurt my eyes. :(
• Math chiller: as far as i know a array does have a .toString() method.
• roland: Avoid to name your iteration variable "int". That's a reserved keyword. Use "i" instead. Let me know :)
• Richard Neil Ilagan: @roland ~ that's a valid answer if you ask me. Maybe not what causes his problem, but a valid addition nonetheless.
• Richard Neil Ilagan: @tryingToGetProgrammingStraight never do a for..in against an array in Javascript.

Answer 1

I think you make the array more than 1 element by calling addToCart() more than once.

The counter will +1 after call addToCart(). The second time you call addToCart(), the counter is 1:

 // counter = 1;
 cartArray[counter]=doTask(productName, productImageURL, productPrice);
 // add log to trace cartArray
 console.log(cartArray);

the cartArray has 2 elements. index 0 is undefined;

How to fix

define cartArray out of addToCart():

var counter=0;
var cartArray=new Array();

Answer 2

Seems like your doTask function when quantity is null,you dont return anything.so cartArray contains a undefined element.try this:

function doTask(productName,productImageURL,productPrice)
{
alert("inside java script");
var cartItem = new Array();
itemName=productName;
itemPrice=productPrice;
alert(itemPrice);
itemImageURL=productImageURL;
quantity=prompt("Please enter the quantity","1");
quantity=parseInt(quantity);
alert(quantity+2);
if (!isNaN( quantity ))
{
 alert("yes its a number");
 alert(itemImageURL);
 alert(itemPrice);
 alert(quantity);
 alert(itemName);
 alert(itemImageURL);
 totalAmount=itemPrice*quantity;
 alert(totalAmount);
 cartItem.push(itemImageURL,itemName,itemPrice,quantity,totalAmount);
 //alert(cartItem.toString());
 console.log(cartItem.toString());
}
return cartItem 
}

Answer 3

One thing that the error tells is that array_element is undefined.. which in turn means cartArray[int] is undefined.

Hence the problem can either be with you using int as a variable name.. or actually the cartArray element is actually undefined.

You can solve your problem by adding null checks (check for undefined) on cartArray before the for loop beings and within the for loop on cartArrray[int]