Uncaught type error : Cannot read value "name" of undefined

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>

Why is this Javascript much slower than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

Search This Blog