未捕获的类型错误：无法读取未定义的值“名称”答案

【问题标题】：Uncaught type error : Cannot read value 'name' of undefined未捕获的类型错误：无法读取未定义的值“名称”
【发布时间】：2012-01-18 13:44:51
【问题描述】：

实际上我有一个全局 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>

【问题讨论】：

如果没有看到 json 和代码，我们怎么可能帮助您？
显而易见：问题是您正在访问一个不存在的属性。解决方案是要么不访问它，要么确保它存在。
您在内循环中增加了a。因此，在外循环的每次迭代中，您都将a 增加了两次。最终a 的值将大于数组中的元素数（当i 为productJSON.length / 2 时）并且您尝试访问数组中不存在的索引。内循环的原因是什么？如果您需要适当的帮助，您应该说明您想要达到的目标。
先生，我想做的是循环只处理数组的每个元素一次，每行显示 2 个产品。所以我用了两个循环。

标签： jquery html json formatting syntax-error

【解决方案1】：

这意味着该属性尚未定义。所以检查你是否定义了属性。

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

编辑

这是一个越界问题。更改此行：

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

【讨论】：

尊敬的先生，内部循环用于控制网页中的列数。表示我可以将产品数量控制到 (2-3) 等。
@AnkurJain 然后为了回答这个问题，我们还需要 HTML 标记。还要说明你想要完成的事情的逻辑。这是必需的，以便找出究竟是什么错误。 1 黄金法则是想象自己回答这个问题并问自己“我是否拥有回答这个问题所需的所有信息？”
非常感谢您的建议先生，下次我会小心的，现在我已经粘贴了整个代码。你现在可以检查一下。
@AnkurJain，您确实粘贴了代码，但您从未解释过您的逻辑背后的原因。所以我再次猜测。大声笑无论如何我已经更新了我的代码。看看这是不是你想要的。
@AnkurJain 我不是“先生”：P 但很高兴能帮助你。