Actually I am having a global JSON, when I am trying to parse its value in loop, it is showing me error “uncaught type error : Cannot read value ‘name’ of undefined”. I have tried a lot but I am still not able to figure out any solution for it.
$(document).ready(function(){
var productJSON = [
{id:"1001",name:"Hopper1",image:"images/290161k.jpg"},
{id:"1002",name:"Hopper2",image:"images/290161k.jpg"},
{id:"1003",name:"Hopper3",image:"images/290161k.jpg"},
{id:"1004",name:"Hopper4",image:"images/290161k.jpg"},
{id:"1005",name:"Hopper5",image:"images/290161k.jpg"},
{id:"1006",name:"Hopper6",image:"images/290161k.jpg"},
{id:"1007",name:"Hopper7",image:"images/290161k.jpg"},
{id:"1008",name:"Hopper8",image:"images/290161k.jpg"}
];
var a=0;
for(var i=0;i<productJSON.length;i++){
var pagedisplay = '';
for(var j=0;j<2;j++){
var generatedProductDisplay = '';
generatedProductDisplay = '<div id="'+productJSON[a].id+'" class="productDiv"><a class="productLink" href="#"><center><div class="productImage"><img src="'+productJSON[a].image+'" width="100%" height="200px" alt="'+productJSON[a].name+'"></div><div><p class="productName">'+productJSON[a].name+'</p></div></center></a></div>';
pagedisplay = pagedisplay+generatedProductDisplay;
a++;
}
pagedisplay = pagedisplay+'<br/>';
$(".productDisplay").append(pagedisplay);
}
$(".productDiv").live("click",function(){
alert("Hello");
});
});
This is the HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Nitin Agro Industries, Chhatarpur</title>
<link href="styles/main.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"
type="text/javascript"></script>
<script src="productsDisplay.js" type="text/javascript"></script>
</head>
<body>
<center>
<div class="page-wrap">
<div class="centerContent">
<h1>Explore our Product Catalog</h1>
<div class="centerText">
<center>
<div class="hideShowDiv">
skdddddddddddd
</div>
<div class="productDisplay"></div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
It means that the property is not defined at that point. So check if you have defined the property.
The question obviously needs the source-code to be answered. Please put them.
EDIT
Its an out of bound problem. Change this line:
acontains value out of the range of the array. Change it toi.As you have not stated your logic. I assume that the inner loop does nothing (from what i can derive) and suggest this:
EDIT 2
As i still didnt understand your inner loop, here is my take on it:
Without inner loop:
With inner loop:
http://jsfiddle.net/guSLL/1/