How to explain JSON to your Mum

JSON? That’s a silly Name

Yes, yes it is, but technologists love their acronyms, it stands for JavaScript Object Notation. The whole idea is based off how ‘objects’ can be represented in JavaScript…Mom? Yeah I thought I might have lost you there. Forget JavaScript for the minute. Lets just think about data, you have basically 3 types of data that you might want to represent:

Name: Value Pairings
This is good old fashioned, x=y sort of data:

Arrays
Image this as a Name that rather than having 1 value, has a list of values:

Objects
Think of this as a Name that can contain any number of name:value pairings, or arrays, or objects (which can contain any number of….etc etc:

Now these three ‘types’ can be used to create almost any block of data you might want to, but nesting them within each other, you can create data sets of increasing specificity. This could be represent in a number of different ways. JSON is one of the ways you could represent them. It’s a serious of ‘grammatical’ rules and constructs that allow you to create whatever level of complexity daat sets. And it just so happens that the format is the way that JavaScript does it natively.

So what’s the Grammar?

OK, yup that’s the best place to start, and I’ve already given you a clue in the above examples, so lets just flesh them out. a JSON object, mainly starts as an Object (see the 3rd type above). It can be other types, but lets just assume for the sake of ease that it’s always an object. Objects have the nice curly brackets. So lets start with:

Wow, that’s weird looking. But yes that is technically a very dull Object. It’s dull because it doesn’t contain any data, so lets start filling it up:

“Name”:”Value Pairings”

Name Value pairings are just that. Name first (in quotes) a semi-colon and then the value (in quotes if it’s a string).

If you have more than 1 they must be separated by a comma (expect for the one at the end, which does not need a comma after it as it’s at the end). So extending the above example lets say:

OK, so now we have an object that contains 3 rows of Name:Value pairings. But lets say that in the data we are sharing each person has more than just 1 interest. That sounds like we need a list of interests, so we could use an array to show them. Which brings up nicely onto Arrays:

Arrays[ ]

An array has a Name and then a series of values contained within square brackets, [ these things ], an array can contain name:value pairings, other arrays or objects. So our example might now look like:

But lets say that our Name:Value pairing for name is a little restrictive and we want them to be held as first and last name. We could use an array, but an alternative might be to make Name into an object, that contains a 2 name:value pairings for first and last names respectively.

Objects

Objects are a name that is mapped as an object using the curly brackets, { these things }, inside an object can be any combination of name:value pairings, arrays, or further objects. Remember that our JSON object is at it’s highest level an object (hence the {}), so our First and Last name example might now look like:

And there we have it a nice data structure to show a person, using JSON, containing an Object, Name:Value pairings an an array. Now this is a very simple example, these files can be as large and complex or as simple as you want.

What’s the best format for each case?

This is probably a question that is outside of the scope of this quick explaination I’m afraid Mum. A lot of the time it’s just common sense that results in certain things being objects, certain things being arrays and other things being name:value pairings. Many times it’s important to think about how the data might be accessed, how it would be looped over, and how it would be treated… OK I lost you again didn’t I, OK, let me give you an example.

How do I getting at the data?

Using the example above, you will probably want to know how to get at each block of data. Lets say (for ease) that you took that JSON object and loaded it into your JavaScript (don’t worry how it was loaded lets just focus on getting at it).

So lets say, we’re now in a situation where in your code you have:

This means that you have a variable (called People) that has a value of the JSON object we just created. Now in Javascript you can access the data in a couple of ways, here’s a couple of examples:

See the pattern, Objects you get at by using a dot to move to the next level. Name:Value Pairings are accessed just like they were a single object. Arrays are accessed by adding a square bracket to the end of the Array name and placing a number that corresponds to the thing you want’s position in the array (arrays always start at zero by the way).

Looping, you can then of course use the above to tell your JavaScript code to loop over objects and arrays to access all of the data stored in a JSON object.

Now the above example is JavaScript. But you can use the same sort of approach in almost every programming language. There are now JSON parsers that will convert the JSON data into the native format of that language easily and without too much computing overhead. (scroll down to the bottom of this page to see some links to some great Parsers)

That’s nice dear, but would you like a cup of tea?

OK Mum, I get the feeling you aren’t seeing the magnitude of this. So let me try to sum up what this means and why it’s so important that you know about it.

JSON is great because it is NOT XML, but it’s like XML. Now I know you’ve heard of XML (although you don’t really understand what it is). So let me just quickly explain why JSON not being XML, but being like XML is a good thing.

• JSON like XML is self describing, that means that each block of Data has a name associated with it that can be used to describe what it is, it means you don’t have to know anything to decipher it. if it was not self describing you’d end up with something like:
1.  
2. var People = {
3.   {
4.     "Jon",
5.     "Sykes"
6.   }
7.   "New Jersey, USA",
8.   ["Explaining things to his Mum", "Drinking coffee", "Mowing the lawn"]
9. }
10.  

Which useless you had a key to tell you want those all were, would be pretty useless.

• JSON and XML can both handle nesting of data. This ability to nest data inside data makes storing and sharing hierarchical data sets much easier. Lets face it data is rarely linear. It’s usually levels of detail that make up the most natural data sets.
• JSON is not like XML because it does not use tags made up of < angle brackets > that contain attributes and/or tag values. Tags are great for document markup (like HTML), but JSON is much lighter weight and has less baggage.
1.  
2. <People>
3.   <Name>
4.     <First>Jon</First>
5.     <Last>Sykes</Last>
6.   </Name>
7.   <Address>New Jersey, USA</Address>
8.   <Interests>
9.     <Interest>Explaining things to his Mum</Interest>
10.     <Interest>Drinking coffee</Interest>
11.     <Interest>Mowing the lawn</Interest>
12.   </Interests>
13. </people>
14.  

Now I’m not an XML author, so i’m sure this could be done differently, but following the JSON example logic, this is how the XML might look. Some other XML vs JSON comparisons.

• JSON unlike XML is fairly human readable, mainly due to the point above.
• JSON can include values that don’t have individual names, i.e. Arrays.
• JSON is more data-orientated than XML is which is more document orientated.

Mum? You still there? OK, yeah I know that last bit was tough. Let me try to summarize:

JSON is easier than XML

JSON is simpler and easier than XML in almost every way. It’s easier to read, easier to write, easier to parse, easier to generate, easier to navigate, smaller in size, etc, etc. XML is good for some things (which we won’t cover now) so JSON is not an XML killer.

JSON is really good at passing data about

Due to the above statement, this makes JSON rather good at passing Data around. It’s especially good when working with JavaScript. Which can handle the JSON object almost as if it was native code, this makes it great for AJAX driven websites, and for public or private API’s.

And that is about it. That’s all you really need to know to get an understanding about JSON.

Now where’s that cup of tea?