Problems displaying JSON data with jQuery -

Why the value in an object's key value can assume value in the undefined form when displayed in HTML.
JSON code is as follows:

  {"products": [{"name": "-------", "id": "------ - - "," value ":" --------- "," description ":" -------- "}, {" name ":" ------- " , "Id": "--------", "value": "---------", "description": "--------"}}} < / Code> 

HTML code:

  & lt; Div id = "speakerbox" & gt; & Lt; H1 & gt; Title & lt; / H1> & Lt; Div id = "object" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

JS code:

  $ GetJSON ('products.json', function) {console.log (products); var output = '& lt; ul & gt;' $ .each (product, function (key, val) {output = = ' Lt; li & gt; '+ val.id +'  ';}); Output + =' & lt; / ul & gt; '; $ (' # object '). Html ( Output);});  

If I use the console.log () method, then I can see the object when I debug in Chrome but instead of viewing the value, it's replaced in HTML as "undefined "Does output. When I run JS through an online validator, I tell you: '$' was used for these code pieces

  $ Any help would be appreciated by GetJSON ('products.json', function (products ($ $ $ $ $ $ $ $).   
 
  product  will contain an object that looks like this: 
 
  { "Products": [...]}  
 
 The variable you have called is  products  and the object contains a code that is  products  is also called an array. You need  products.products  to access it. 
 
 To iterate, you need  $ each (instead of products.products  for  $ .for each (Product . 
 
, for this reason, It is possible to call your variable  feedback  to make more sense by saying  products.products  to  response.products .