Select JSON data and show in my HTML

So i have some json data and i am trying to extract the following data elements:

"name"
"l" = current price
"c" = change in price

Yet using the following code the data (all the data) is displayed as Object Object;

1. How would i select the "name", "l" and "c" data figures from the json data
2. Why is th开发者_如何学Pythone data displaying as OBJECT OBJECT ?

As i am new to JSON i am looking forward to your responses all the information you provide will help me greatly !

 $.getJSON('http://www.google.com/finance/info?infotype=infoquoteall&q=SHMN,^DJI,^IXIC,^BSESN,^SPX,^FTSE&callback=?', function(data){


     var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
     });

Here is the fiddle: http://jsfiddle.net/A4jKT/12/

You could use it like an object. So for instance you could do the following to get the 'l' property:

items.push('<li id="' + key + '">' + val.l + '</li>');

Or if you want the name:

items.push('<li id="' + key + '">' + val.name + '</li>');

Since at the moment you are just pushing the whole object (val) into items. You can reference the fields in that object.

Working Demo: http://jsfiddle.net/naveen/c2VeD/