1

I am new to JSON

How can I display the following data to the html. for sample I want to display the 'lat' and 'lng' from the 'southwest' or I want to display the 'text'.

{ "routes" : [ { "bounds" : { "northeast" : { "lat" : -26.758340, "lng" : 153.035930 }, "southwest" : { "lat" : -27.454070, "lng" : 152.852150 } }, "copyrights" : "Map data ©2011 GBRMPA, Google, Whereis(R), Sensis Pty Ltd", "legs" : [ { "distance" : { "text" : "89.7 km", "value" : 89693 }, "duration" : { "text" : "1 hour 17 mins", "value" : 4633 }, "end_address" : "Maleny QLD 4552, Australia", "end_location" : { "lat" : -26.758420, "lng" : 152.852150 }, "start_address" : "Brisbane QLD, Australia", "start_location" : { "lat" : -27.454070, "lng" : 153.026880 }, } ], } ] }

Cheers!

Ralph
  • 430
  • 2
  • 9

3 Answers3

3

Assuming that data is your json, you can use $.parseJSON(data) to get the object.
By the way, the json in your example is not valid - you have two extra comas near the end. Here's an example using the valid json: 

var data = '{ "routes" : [ { "bounds" : { "northeast" : { "lat" : -26.758340, "lng" : 153.035930 }, "southwest" : { "lat" : -27.454070, "lng" : 152.852150 } }, "copyrights" : "Map data ©2011 GBRMPA, Google, Whereis(R), Sensis Pty Ltd", "legs" : [ { "distance" : { "text" : "89.7 km", "value" : 89693 }, "duration" : { "text" : "1 hour 17 mins", "value" : 4633 }, "end_address" : "Maleny QLD 4552, Australia", "end_location" : { "lat" : -26.758420, "lng" : 152.852150 }, "start_address" : "Brisbane QLD, Australia", "start_location" : { "lat" : -27.454070, "lng" : 153.026880 } } ] } ] }';
var routes = $.parseJSON(data).routes;

Now routes is a javascript array of route objects. For example routes[0].copyrights returns "Map data ©2011 GBRMPA, Google, Whereis(R), Sensis Pty Ltd". Hope this helps!

Georgi Stoyanov
  • 1,208
  • 1
  • 11
  • 13
3

As Georgi said, use $.parseJSON(data).

Then, to access the lat and lng properties, you can use the dot notation:

var data = ''; // json string here
var jsonObject = $.parseJSON(data);
var lat = jsonObject.routes[0].bounds.northeast.lat;
var lng = jsonObject.routes[0].bounds.northeast.lng;

Because routes is an array object, we use the regular array element accessor ([]) to access the first element (0).

Alex
  • 9,313
  • 1
  • 39
  • 44
0

it is possible that your json string is already parsed, you can get a json object from an ajax service, if you then want a value of a certain json object or sub object you can just fetch it like this:

var data = {here goes your whole json object you have above...};
var southwestLong = data.routes[0].bounds.southwest.lng;

basically, the parsing is left out because it came in already as a json object.

but in most cases you would be writing some looping for example loop over all route objects, to render them in a list.

Also, I advise you to test for a certain item to be defined. because if you pass in a changed json object, where it has 0 routes for example, the above code would error, because data.routes[0] does not exist.

Sander
  • 13,301
  • 15
  • 72
  • 97