Parsing JSON from Google Map

Question

I want to display place details from this json: I have problem with parse it, i want to get "website", "name" and "rating". This is a link to json: https://maps.googleapis.com/maps/api/place/details/json?reference=CpQBjAAAAHDHuimUQATR6gfoWNmZlk5dKUKq_n46BpSzPQCjk1m9glTKkiAHH_Gs4xGttdOSj35WJJDAV90dAPnNnZK2OaxMgogdeHKQhIedh6UduFrW53wtwXigUfpAzsCgIzYNI0UQtCj38cr_DE56RH4Wi9d2bWbbIuRyDX6tx2Fmk2EQzO_lVJ-oq4ZY5uI6I75RnxIQJ6smWUVVIHup9Jvc517DKhoUidfNPyQZZIgGiXS_SwGQ1wg0gtc&sensor=true&key=AIzaSyDSKYz8pCRLHglMPGo1ca6E-geDUQwFNQ8.

{

"html_attributions": [
    "Źródło wpisów: <a href=\"http://www.yellowpages.com.au/\">Yellow Pages</a>"
],
"result": {
    "address_components": [
        {
            "long_name": "10",
            "short_name": "10",
            "types": [
                "street_number"
            ]
        },
        {
            "long_name": "Darling Drive",
            "short_name": "Darling Drive",
            "types": [
                "route"
            ]
        },
        {
            "long_name": "Darling Harbour, Sydney",
            "short_name": "Darling Harbour, Sydney",
            "types": [
                "locality",
                "political"
            ]
        },
        {
            "long_name": "NSW",
            "short_name": "NSW",
            "types": [
                "administrative_area_level_1",
                "political"
            ]
        },
        {
            "long_name": "AU",
            "short_name": "AU",
            "types": [
                "country",
                "political"
            ]
        },
        {
            "long_name": "2000",
            "short_name": "2000",
            "types": [
                "postal_code"
            ]
        }
    ],
    "formatted_address": "Harbourside Centre 10 Darling Drive, Darling Harbour, Sydney NSW, Australia",
    "formatted_phone_number": "(02) 9211 8900",
    "geometry": {
        "location": {
            "lat": -33.871983,
            "lng": 151.199086
        }
    },
    "icon": "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
    "id": "677679492a58049a7eae079e0890897eb953d79b",
    "international_phone_number": "+61 2 9211 8900",
    "name": "Zaaffran Restaurant - BBQ and GRILL, Darling Harbour",
    "rating": 3.9,
    "reference": "CpQBjAAAAARBNvpI6EgL3AuRxjwEMz9Va2gFaByrv-0GdqcoZ2QnyfmJiwEX1MLv2uCofWPqxkHPWQNwskrRD58LgD7egsuGooWPDmd2v1Xmt1YTLH0NF0yhXPfSiK62n6m2elI8u6h6FUW6eKJdQVGKLeRfLHl-Ezw_ML1kL4srZ80xuFZNWVmUyHWN2H5BDhhpGI4NwxIQAr5S5g1x1v4WvxS-zq2YBxoU0pVhJe6lLnkKDmm8fgYObLakvL8",
    "types": [
        "restaurant",
        "food",
        "establishment"
    ],
    "url": "http://maps.google.com/maps/place?cid=14075582311174685259",
    "vicinity": "Harbourside Centre 10 Darling Drive, Darling Harbour, Sydney",
    "website": "http://www.zaaffran.com/"
},
"status": "OK"

}

I tried to use this function:

$(document).ready(function() {

   $.getJSON('GOOGLE URL HERE', function(data) {
     $('#dictionary').empty();
      $.each(data, function(entryIndex, entry) {
         var html = '<div class="entry">';
         html += '<h3 class="term">' + entry['name'] + '</h3>';
         html += '<div class="part">' + entry['website'] + '</div>';
         html += '<div class="definition">';
         html += entry['rating'];
         html += '</div>';
         html += '</div>';
         $('#dictionary').append(html);
      });
   });
   return false;

});

It doesn't work for me. Help me please, thanks a lot. Michal

Answer 1

replace:

 $.each(data, function(entryIndex, entry) {
     var html = '<div class="entry">';
     html += '<h3 class="term">' + entry['name'] + '</h3>';
     html += '<div class="part">' + entry['website'] + '</div>';
     html += '<div class="definition">';
     html += entry['rating'];
     html += '</div>';
     html += '</div>';
     $('#dictionary').append(html);
  });

with:

     var html = '<div class="entry">';
     html += '<h3 class="term">' + data.result['name'] + '</h3>';
     html += '<div class="part">' + data.result['website'] + '</div>';
     html += '<div class="definition">';
     html += entry['rating'];
     html += '</div>';
     html += '</div>';
     $('#dictionary').append(html);

The each is not needed. Access the data directly with data.result.name, since data is a single object as well as result