How to get JSON objects from web service response - html

Question

I am very new to use web services, javascript, JSON technologies and I need to use a URL to get some data to use in my HTML file.
The url that I am trying to get value of is something like this.
the result of this url in browser is like below:
{
"transactionid": "asdf",
"status": 0,
"poilist": [
{
"id": 123,
"name": "some company",
"address": "address",
"latitude": 333333,
"longitude": 333333,
"distance": 4869
},
{
.... // lots of similar nodes to above
}
}
I need to get some properties of poilist list such as longitude, latitude etc. and use them in my HTML file which includes only Javascript and HTML codes.
I made some research on internet but couldn't find a appropriate example for my situation. I don't know where to start. Any help will be appreciated.
Thank you.

Answer 1

You could to it this way:
var url = 'http://www.locationbox.com.tr/locationbox/services?Key=key&Cmd=PoiSearch&Typ=JSON&Latitude=30&Longitude=30&Radius=10000&Brand=SomeBrand&Keyword=';
$('#test').on('click', function () {
$.ajax({
url: url,
// the name of the callback parameter, as specified by the YQL service
jsonp: "callback",
// tell jQuery we're expecting JSONP
dataType: "jsonp",
// work with the response
success: function (response) {
//response is an object. use it here
console.log(response); // server response
}
});
});
http://jsfiddle.net/hlapidez/sm64g/

Answer 2

Hope this helps for u.
Here poilist is an JsonArray.
So u have to iterate poilist and get poilist properties
javascript example
var response = "{ "transactionid": "asdf", "status": 0, "poilist": [ { "id": 123, "name": "some company", "address": "address", "latitude": 333333, "longitude": 333333, "distance": 4869 },... ";
var poiList = response.poilist;
for(var i=0;i<poiList.length;i++){
var name = poiList[i].name;
var id= poiList[i].id;
var lat = poiList[i].latitutde;
var long = poiList[i].longitude;
console.log(lat);
console.log(long);
}
This code will print all properties of poilist in browser's console.

Answer 3

I would start with jQuery, specificaly with jQuery.getJSON(). Read about it here.
If you haven't used jQuery and don't know how to use it. I would look at here first.
Very basic example of loading the data and showing them in console would look like this:
$(document).ready(function() {
var url = ""; //enter an url here
$.getJSON(url, function( data ) {
console.log(data);
});
});