JSON stands for JavaScript Object Notation. It has become a standard way to provide machine readable data to and from web services. Despite the fact that JavaScript is part of it's title, it is generally useful in all programming languages.
As stated on the json.org site: An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
A simple JSON object
{
"first_name": "Shawn",
"last_name": "Van Every"
}
An array of JSON objects
[
{
"first_name": "Shawn",
"last_name": "Van Every"
},
{
"first_name": "Joe",
"last_name": "Frank"
}
]
values can be string, number, null or boolean (true/false)One JSON data feed that might be interesting is from OpenWeatherMap. Their API is documented here.
This is the feed for New York City's data: http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial which yields the following:
{"coord":{"lon":-74.005966,"lat":40.714272},"sys":{"country":"US","sunrise":1380106043,"sunset":1380149242},"weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01n"}],"base":"gdps stations","main":{"temp":60.44,"pressure":1013,"temp_min":54,"temp_max":66.2,"humidity":88},"wind":{"speed":2.22,"gust":3.08,"deg":285},"rain":{"3h":0},"clouds":{"all":0},"dt":1380076310,"id":5128581,"name":"New York","cod":200}
We can make this JSON easier to read by doing some formatting: http://jsonformatter.curiousconcept.com/
After formatting we get the following:
{
"coord":{
"lon":-74.005966,
"lat":40.714272
},
"sys":{
"country":"US",
"sunrise":1380106043,
"sunset":1380149242
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"Sky is Clear",
"icon":"01n"
}
],
"base":"gdps stations",
"main":{
"temp":60.44,
"pressure":1013,
"temp_min":54,
"temp_max":66.2,
"humidity":88
},
"wind":{
"speed":2.22,
"gust":3.08,
"deg":285
},
"rain":{
"3h":0
},
"clouds":{
"all":0
},
"dt":1380076310,
"id":5128581,
"name":"New York",
"cod":200
}
We see a lot of what we might expect, temp, pressure, humidity and so on. Also of interest is the sunrise and sunset time. These are particularly interesting because they are represented in standard "unix timestamp" which is the number of seconds from January 1, 1970. http://www.epochconverter.com/ - Command line: date "+%s"
To pull a value out of this JSON structure, we simply treat it like it is a javascript object and use dot syntax to traverse through the structure. To get the current temperature, we use the top level object and keep going down, theObject.main.temp should contain the current temperature.
var theObject = {
"coord":{
"lon":-74.005966,
"lat":40.714272
},
"sys":{
"country":"US",
"sunrise":1380106043,
"sunset":1380149242
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"Sky is Clear",
"icon":"01n"
}
],
"base":"gdps stations",
"main":{
"temp":60.44,
"pressure":1013,
"temp_min":54,
"temp_max":66.2,
"humidity":88
},
"wind":{
"speed":2.22,
"gust":3.08,
"deg":285
},
"rain":{
"3h":0
},
"clouds":{
"all":0
},
"dt":1380076310,
"id":5128581,
"name":"New York",
"cod":200
};
console.log("Temperature is: " + theObject.main.temp);
Unfortunately, there are quite a few security restrictions on making AJAX requests across domains. If you are interested in investigating those and how to overcome them, checkout this: http://www.html5rocks.com/en/tutorials/cors/.
Fortunately, there are a few libraries such as jQuery that take much of the pain away.
More Information: A Brief History of Ajax by Aaron SwartzYou can load and parse JSON easily using jQuery.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial",
dataType: 'json',
success: function(data) {
alert("Temperature is: " + data.main.temp );
},
error: function() {
alert("error");
}
});
});
</script>