Google Place API - jQuery JSON Persing of received Data

Question

I am using Google Place API to get suggestions of nearest position.

I have managed to get the data from the server.

I have a response from the server like this-

{
   "predictions" : [
      {
         "description" : "Australia",
         "id" : "3ba963f8de67dc16df0a8de60e46418338a3181a",
         "matched_substrings" : [
            {
               "length" : 1,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJ38WHZwf9KysRUhNblaFnglM",
         "reference" : "CjQhAAAAlf04PlAgVJSzXXBUwZc0JGNjk5I9hsWHkvWwfuY_U4bkR3hm2lC4EN6fV4KOXr9PEhD5vhvmJOucMwDiwRaYJ0RAGhQofmdPwvnV4qHFefKAu0Anw110WQ",
         "terms" : [
            {
               "offset" : 0,
               "value" : "Australia"
            }
         ],
         "types" : [ "country", "political", "geocode" ]
      },
      {
         "description" : "Argentina",
         "id" : "dcaa0dffd352dfaaa3dc73dd1dbf3153708637ef",
         "matched_substrings" : [
            {
               "length" : 1,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJZ8b99fXKvJURqA_wKpl3Lz0",
         "reference" : "CjQhAAAAO1RnJcq4Dky5uLQFHCULfP6VzbklXYCiR_DDuJMJxf5wFbTXVnHM7bn7ZSlxsR7IEhC_HlGxn8JeuC2h86S2EIpSGhRddclDM07Acre3NSiTWJoClMNtKQ",
         "terms" : [
            {
               "offset" : 0,
               "value" : "Argentina"
            }
         ],
         "types" : [ "country", "political", "geocode" ]
      },
      {
         "description" : "Austria",
         "id" : "e16f8e9f2a60f60a0881c41488ff3869e4f938a4",
         "matched_substrings" : [
            {
               "length" : 1,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJfyqdJZsHbUcRr8Hk3XvUEhA",
         "reference" : "CiQfAAAAXX_lF6oxms4MgmajAkQabO3drGaCf04EHArvaGV3UTISEFulfBYy0rmrSxPIb1JLY_0aFJ2UqN170fR7OjOGAF3v3vZqO21i",
         "terms" : [
            {
               "offset" : 0,
               "value" : "Austria"
            }
         ],
         "types" : [ "country", "political", "geocode" ]
      }
   ],
   "status" : "OK"
}

What I have done to get the data by parsing with jQuery is-

$.ajax(
{
    url: Auto_Complete_Link, 
    type: "GET",   
    dataType: 'jsonp',
    cache: false,
    crossDomain: true,
    /*data: JSON.stringify(somejson),*/
    success: function (response)
    {
        $.each(response, function(i, field)
        {
            console.log(field + " <=> "+ i);
        });
    },
    error: function (xhr, status)
    {
        console.error("not connecting to google server");
    }
});

So the parsing part of the code is like it-

$.each(response, function(i, field)
{
    console.log(field + " <=> "+ i);
});

But I am getting a error named

Uncaught SyntaxError: Unexpected token :

Error is JSON like it-

Can anyone please help to solve this?

Thanks in advance for helping.

Answer 1

Try changing your JavaScript to:

$.ajax(
{
    url: Auto_Complete_Link, 
    type: "GET",   
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    cache: false,
    crossDomain: true,
    success: function (response)
    {
        $.each(response, function(i, field)
        {
            console.log(field + " <=> "+ i);
        });
    },
    error: function (xhr, status)
    {
        console.error("not connecting to google server");
    }
});