JSON – setting the scene

I know, I might be late the party, but at least I came. I'd like to share with you some realisations I've recently had regarding JSON. This came about because I have been doing quite a bit of mobile development lately. Not iOS development, but with JQuery Mobile. I'll shout the praises of JQM in another article, but today I want to talk about JSON.

JSON (Javascript Object Notation) has been around for quite a while now. Simply described, JSON is an open standard to help us exchange data between systems. This might be to send data to your customers, consume server-side data on the client-side or even serve up data to mobile devices. In short, JSON gives us readable collections of data that are easily accessible regardless of platform.

One of the beauties of JSON is it's format. JSON will always be in the same format and that is what makes it readable across multiple platforms and technology. The structure looks like this:

var global = { "continent":
    [
        { "id": "AU", "name": "Australia" },
        { "id": "SA", "name": "South America" },
        { "id": "AS", "name": "Asia" },
        { "id": "EU", "name": "Europe" },
        { "id": "AF", "name": "Africa" },
        { "id": "NA", "name": "North America" }
    ]
    }

This is a "stream" of data. We'll refer to it as a JSON stream. In this example, a variable "global" is created to stuff the JSON data into. This gives a reference that can be used later.

Next, is the data. JSON is really robust so we can actually store multiple lists of data in the one JSON stream. So, we need to refer to each list easily. That's what continent does. So now we have a JSON stream called global and a data list called continent. Now comes the list.

I've formatted the list in a way that makes it readable. But you can structure however you like. But you MUST format it correctly. What we have is a series of key/value pairs. I like to call them fields (kind of like a database). The key and value are separated by a colon (:). Each pair is separated by a comma (,) and all fields are surrounded by double quotes ("). That way a field can have spaces and other "special" characters.

What do we have here? Well, we have a list of data. If we think of the hierarchy we have built up so far, this is what we have:

ID	Name
AU	Australia
SA	South America
AS	Asia
EU	Europe
AF	Africa
NA	North America

You can think of it like a spreadsheet. global is the name of the spreadsheet. continent is the worksheet name and the list are the cells within the spreadsheet.

Just like a spreadsheet can have multiple worksheets, a JSON stream can have multiple data lists. We still have the enclosing variable (atlas) but we can have multiple lists within that. We currently have a list of continents (ID, Name and Language). But we could also store a list of countries. Which would look like this:

var global = { "continent":
    [
        { "id": "AU", "name": "Australia" },
        { "id": "SA", "name": "South America" },
        { "id": "AS", "name": "Asia" },
        { "id": "EU", "name": "Europe" },
        { "id": "AF", "name": "Africa" },
        { "id": "NA", "name": "North America" }
    ], "country":
    [
        { "id": "GER", "name": "Germany", "language": "german" },
        { "id": "CAN", "name": "Canada", "language": "french" },
        { "id": "AUS", "name": "Australia", "language": "english" },
        { "id": "USA", "name": "United States of America", "language": "english" },
        { "id": "GB", "name": "Great Britain", "language": "english" },
        { "id": "RUS", "name": "Russia", "language": "russian" }
    ]
    }

So our "spreadsheet" would look like this:

ID	Name	Language
GER	Germany	German
CAN	Canada	French
AUS	Australia	English
USA	United States of America	English
GB	Great Britain	English
RUS	Russia	Russian

Hopefully, you can see that we are building up a hierarchy. We have global at the very top level. Beneath that, we have two lists of data, Continent and Country. Within those lists, we have a series of line items. This hierarchy lets us clearly refer to parts of the JSON stream. For example, we could get the value for the German country's language like this global.continent[name="Germany"].language. Now this particular notation is not correct; but it's not far off the mark. I just wanted to describe it for you. We can continue building up lists of data within the one JSON stream.

So now you know what JSON is, what it looks like and it is formatted. Next, we'll talk about getting the data and using it in javascript.

Til next time ....