Jayant Usrete Jayant Usrete - 3 months ago 15
jQuery Question

JSON parsing using javascript returns [object Object]

I am making a simple webpage which takes address as input and returns the latitude and longitude for that address using the google

geocode
api
. I am not able to process the result. I want to select the particular element i.e., the latitude and longitude from the
JSON
which is returned in response from google. Please help me I am new to
JSON
. Here is the
JSON
:

{
"results" : [
{
"address_components" : [
{
"long_name" : "Jabalpur",
"short_name" : "Jabalpur",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Jabalpur",
"short_name" : "Jabalpur",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Madhya Pradesh",
"short_name" : "MP",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "India",
"short_name" : "IN",
"types" : [ "country", "political" ]
},
{
"long_name" : "482001",
"short_name" : "482001",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "Jabalpur, Madhya Pradesh 482001, India",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 23.246354,
"lng" : 80.08003219999999
},
"southwest" : {
"lat" : 23.1050362,
"lng" : 79.85747339999999
}
},
"location" : {
"lat" : 23.181467,
"lng" : 79.98640709999999
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 23.246354,
"lng" : 80.08003219999999
},
"southwest" : {
"lat" : 23.1050362,
"lng" : 79.85747339999999
}
}
},
"place_id" : "ChIJfam2DxqugTkRueNDvBYGAkQ",
"types" : [ "locality", "political" ]
}
],
"status" : "OK"
}


and my code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geocode</title>
</head>
<body>
Enter Address<input type="text" id="UserInput">
Go<input type="button" onclick="geoCode()">

<script>

function geoCode(){

var UserInput = document.getElementById('UserInput').valueOf();
var xmlhttp = new XMLHttpRequest();
var ApiKey = 'AIzaSyDZP2E_5LLE6VOwIbrNImS32sAx5rsgEbU';
var myArr;

var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+UserInput.value+'&key='+ApiKey;

var xhr = new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest() {
if(xhr.readyState==4 && xhr.status==200)
{
var response = JSON.parse(xhr.responseText);
alert(response["results"][0][0]);
}
}
}


I tried
JSON.stringify()
but it spits out all the data from the response. How do I select that one particular element from JSON? Please help

Answer
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geocode</title>
</head>
<body>
Enter Address<input type="text" id="UserInput">
Go<input type="button" onclick="geoCode()">

<script>

    function geoCode(){

        var UserInput =  document.getElementById('UserInput').valueOf();
        var xmlhttp = new XMLHttpRequest();
        var ApiKey = 'AIzaSyDZP2E_5LLE6VOwIbrNImS32sAx5rsgEbU';
        var myArr;

        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+UserInput.value+'&key='+ApiKey;

        var xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.send();

        xhr.onreadystatechange = processRequest;

        function processRequest() {
            if(xhr.readyState==4 && xhr.status==200)
            {
                var response = JSON.parse(xhr.responseText);
              alert(response.results[0].geometry.location.lat + " " + response.results[0].geometry.location.lng);
            }
        }
    }