未捕获类型错误：无法读取未定义的值'name'

时间：2012-01-18 13:44:52

标签： jquery html json formatting syntax-error

实际上我有一个全局JSON，当我试图在循环中解析它的值时，它显示错误“未捕获类型错误：无法读取未定义的值'名称'”。我已经尝试了很多，但我仍然无法找到任何解决方案。

    $(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"); 
});
   });

这是HTML代码

<!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>

1 个答案:

答案 0 :(得分：0)

这意味着此时未定义属性。因此，请检查您是否已定义该属性。

这个问题显然需要回答源代码。请把它们放好。

修改

它是一个出界的问题。改变这一行：

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>';

a包含超出数组范围的值。将其更改为i。

你还没有说明你的逻辑。我假设内部循环什么都不做（从我可以推导出来）并建议：

for(var i=0;i<productJSON.length;i++){
    var pagedisplay = '';
        var generatedProductDisplay = '';

        generatedProductDisplay = '<div id="'+productJSON[i].id+'" class="productDiv"><a class="productLink" href="#"><center><div class="productImage"><img src="'+productJSON[i].image+'" width="100%" height="200px" alt="'+productJSON[i].name+'"></div><div><p class="productName">'+productJSON[i].name+'</p></div></center></a></div>';

        pagedisplay = pagedisplay+generatedProductDisplay;
        pagedisplay = pagedisplay+'<br/>';
        $(".productDisplay").append(pagedisplay);
    }

编辑2

由于我仍然不理解你的内循环，这是我对它的看法：

没有内循环：

http://jsfiddle.net/guSLL/
$(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"}
    ];
    for (var i = 0; i < productJSON.length; i++) {
        var pagedisplay = '';
        generatedProductDisplay = '<div id="' + productJSON[i].id + '" class="productDiv"><a class="productLink" href="#"><center><div class="productImage"><img src="' + productJSON[i].image + '" width="100%" height="200px" alt="' + productJSON[i].name + '"></div><div><p class="productName">' + productJSON[i].name + '</p></div></center></a></div>';
        pagedisplay = pagedisplay + generatedProductDisplay;
        pagedisplay = pagedisplay + '<br/>';
        $(".productDisplay").append(pagedisplay);
    }

    $(".productDiv").live("click", function() {
        alert("Hello");
    });
});

内圈：

http://jsfiddle.net/guSLL/1/ 

$(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"}
    ];
    for (var i = 0; i < productJSON.length;) {

        var pagedisplay = '';
        for (j = 0; j < 2 && i < productJSON.length; j++, i++) {
            generatedProductDisplay = '<div id="' + productJSON[i].id + '" class="productDiv"><a class="productLink" href="#"><center><div class="productImage"><img src="' + productJSON[i].image + '" width="100%" height="200px" alt="' + productJSON[i].name + '"></div><div><p class="productName">' + productJSON[i].name + '</p></div></center></a></div>';
            pagedisplay = pagedisplay + generatedProductDisplay;
            pagedisplay = pagedisplay + '<br/>';

        }
        $(".productDisplay").append(pagedisplay);
    }

    $(".productDiv").live("click", function() {
        alert("Hello");
    });
});
相关问题
最新问题