The basics of HTML, Javascript, JQuery and JSON – What is JSON?

Recently I had to teach myself how to create a HTML page that would use Javascript and jQuery to grab data that was stored in the JSON format, parse the data and then present the data in a web browser.

The first thing that I had to learn is: What is JSON?

First off JSON is a acronym for ‘JavaScript Object Notation’.

A definition for JSON can be found here: JSON

In (very) short form JSON is a way of formatting data that allows the data to then be transmitted across a network. The data is assembled into structures and associative arrays that are called ‘objects’

Here’s an example object from the Wikipedia page that describes a person.

Note that the example is an ‘object’ that contains another ‘object’ (the address info) and a ‘array’ (the phone number info) that contains ‘objects’.

“firstName”: “John”,
“lastName”: “Smith”,
“age”: 25,
“streetAddress”: “21 2nd Street”,
“city”: “New York”,
“state”: “NY”,
“postalCode”: “10021”
“type”: “home”,
“number”: “212 555-1234”
“type”: “fax”,
“number”: “646 555-4567”

Lots of different companies such as Google, Yahoo present API’s that allow programs to request information from their servers using JSON.

In my next post I’ll take a look at how I assembled my first project.