I am having extreme difficulty accessing nested values in JSON arrays, and for the life of me cannot figure out why my attempts are resulting in undefined values. I am trying to get the distance between two postcodes using the Google Distance Matrix API.
For full explanation, see the bottom of this post. For now, I will show the code performing the operations.
When the user completes entering the postcode for the origin and the destination, the following JavaScript function is called:
function calculateDistance(){
var origin = $("#ex_origin").val(); // Success
var destination = $("#ex_dest").val(); // Success
obj = { "origin" : origin, "destination" : destination }; // Set up JSON Object
dbParam = JSON.stringify(obj); // Convert the object into a string to be used by the PHP file
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText); // Parse the JSON string so it can be read by JavaScrippt
alert(result); // Returns JSON OBject (Expected)
alert(result["row"][0]["elements"][0]["distance"][0].text); //Returns undefined (Undesired)
}
};
xhttp.open("POST", "includes/ajax/google_maps/get_distance_info.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("obj=" + dbParam);
}
The get_distance_info.php file is successfully called. It contains the following code:
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["obj"], false);
$origin = $obj->origin;
$destination = $obj->destination;
$key = "[Removed for Stack Overflow]";
$url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$origin."&destinations=".$destination."&mode=driving&language=en-EN&key=".$key;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'APIKEY: [Removed for Stack Overflow]',
'Content-Type: application/json',
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
// curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // These were tests
// curl_setopt($ch, CURLOPT_PROXYPORT, 3128); // These were tests
// curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); // These were tests
// curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); // These were tests
$response = curl_exec($ch);
curl_close($ch);
echo $response;
// echo json_encode($response); The result does not have to be re-encoded, as it is already encoded by the Google API.
Now the response I get from the get_distance_info.php file when I input two random addresses is the following:
{
"destination_addresses" : [ "Great Tower St, London EC3R 5BT, UK" ],
"origin_addresses" : [ "Eccles, Manchester M30 0NB, UK" ],
"rows" : [
{
"elements" : [
{
"distance" : {
"text" : "346 km",
"value" : 345911
},
"duration" : {
"text" : "4 hours 7 mins",
"value" : 14818
},
"status" : "OK"
}
]
}
],
"status" : "OK"
}
So the problem is that when we roll back to the first set of JavaScript code, I cannot get the text value of distance, it returns undefined. But you'll notice the attempt looks a little sloppy - this is due to the fact I've tried every conceivable variation, to the point I clearly cannot determine where I am wrong.
What I can determine, is that consistently, I cannot get past the "elements" object. It seems to not find it, and anything to do with it returns undefined.
Please, as I'm losing the plot; does anyone see where the problem with this code is, and how I can achieve the desired results?
To summarise: I want either the value of distance or the text of distance in the JSON object array, but am currently getting undefined.
P.s. for anyone wondering, if I uncomment out the json_encode, in my get_distance_info.php file, it simply returns as a string, and so any iterations are done on a per character basis rather than as an object.
