0

I am very new to programming as I have only started programming last week. Code Part - 

var office = document.getElementById('start').value;
var pickup = document.getElementById('start').value;
 $.get("https://maps.googleapis.com/maps/api/distancematrix/json?origins="+office+"&destinations="+pickup+"&mode=drivinging&language=en&sensor=false",function(data){
alert(data['status']);

Data returned -

http://maps.googleapis.com/maps/api/distancematrix/json?origins=edingbourgh&destinations=london&mode=drivinging&language=en&sensor=false

I can access and display "destination_addresses", "status" and "origin_addresses" using data['status'] or data.status but unable to access anything inside rows[] I have tried every method I possibly know.

I thought that I could just do data.row.distance.text but nothing happens.

any help would be much appreciated

Ripa Saha
  • 2,532
  • 6
  • 27
  • 51
Adam Renwick
  • 19
  • 4
  • possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) – Arun P Johny Aug 16 '13 at 12:23
  • 1
    `rows` is an array, so you can't access its elements using `data.row.distance`. You'll need to be `more specific`: `rows[0].elements.distance.text` – kayen Aug 16 '13 at 12:25
  • elements is an array as well: `rows[0].elements[0].distance.text` – nirazul Aug 16 '13 at 12:46

4 Answers4

2

rows is an array, as well as elements, you need to access it like this:

var text = data.rows[0].elements[0].distance.text;
// this yields "652 km"

You want to return the first element of the array, because it has only one. rows[] doesn't access anything. You need a number within the brackets. There might be multiple objects rows or elements. Fill in the array index you want:

var text = data.rows[2].elements[5].distance.text;
// this yields text from the sixth element of the third row.


Original response:

  {
     "destination_addresses" : [ "London, UK" ],
     "origin_addresses" : [ "Edinburgh, City of Edinburgh, UK" ],
     "rows" : [
        {
           "elements" : [
              {
                 "distance" : {
                    "text" : "652 km",
                    "value" : 652135
                 },
                 "duration" : {
                    "text" : "6 hours 44 mins",
                    "value" : 24247
                 },
                 "status" : "OK"
              }
           ]
        }
     ],
     "status" : "OK"
  }
nirazul
  • 3,928
  • 4
  • 26
  • 46
1

try 

alert(data['rows'][0].elements[0].distance.text);

output 625km

Amith
  • 1,424
  • 1
  • 10
  • 22
0

Include jquery and try to parse the json data returned using JSON.parse which would give you a javascript array object 

var dataArray = JSON.parse(data['status']);
alert(dataArray['status']);

Hope this helps

iJade
  • 23,144
  • 56
  • 154
  • 243
0

first parse the json into a real object:

try {
  var realObject = JSON.parse(jsonString);
} catch (err) {
  console.log("error parsing json string");
}

and than you should be able to access via:

var text = data.rows[0].elements[0].distance.text;
mrv
  • 311
  • 1
  • 4
  • 8
  • I'm pretty sure with JQuery $.get the `data` variable contains the unserialized object and not the JSON string. – HMR Aug 16 '13 at 12:33
  • This would be a matter of google in this case: `The success callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response` http://api.jquery.com/jQuery.get/ – mrv Aug 31 '13 at 18:54
  • Based on the response headers Data could either be text (string) or an object (the parsed JSON) it's unlikely an (XML) document will be returned since the JSON string would not make valid XML even if it would return that response header. Assuming the OP has the right headers there is no need to parse the returned value. – HMR Sep 01 '13 at 02:41