JSON (JavaScript Object Notation) is a lightweight method of storing and sharing information: between the browser and a server, within JavaScript itself, and between programming languages.

If you’ve read my previous articles on arrays, nested arrays and objects, you’re already halfway to understanding JSON. Unlike other syntax-heavy formats such as XML, JSON is already (mostly) JavaScript: there’s very little work for your script to parse through, interpret, or translate JSON. As such, it is a “native” data standard in JavaScript, and has largely replaced XML and other implementations.

JSON Structure

When it is written inside a script, JSON data is simply defined as a variable; specifically, as an object with comma-separated properties and values:

var starShips = {
    "name": "Executor",
    "class": "Dreadnought",
    "manufacturer": "Kuat Drive Yards",
    "beam": 19000
}

Referencing the properties can be gained via the familiar dot syntax. In the console:

console.log(starShips.name);
> "Executor"

You could add another starship by adding another object:

var starShips = [{
    "name": "Executor",
    "class": "Dreadnought",
    "manufacturer": "Kuat Drive Yards",
    "beam": 19000
},
{
    "name": "Millennium Falcon",
    "class": "Light Freighter",
    "manufacturer": "Corellian Engineering Corporation",
    "beam": 34.75
}];

The two potential problems with the array-of-objects is that we don’t have an ability to address the individual entries by name; instead, we must address the primary “slots” in the array numerically:

starShips[1].name
> Millennium Falcon

Nested JSON

If we want two (or more) entries and be able to address them by name, we must nest objects inside the starShip variable:

var starShips = {
  "Executor": {
    "class": "Dreadnought",
    "manufacturer": "Kuat Drive Yards",
    "beam": 19000
  },
  "Millennium Falcon": {
    "class": "Light Freighter",
    "manufacturer": "Corellian Engineering Corporation",
    "beam": 34.75
  }
}

Now each ship has become an object unto itself, with properties and values inside it. To get to specific information, we could extend the dot notation:

starShips.Executor.class
> Dreadnought

However, this doesn’t work in the case of the Millennium Falcon, since the ship name contains a space: trying to use a space in dot notation will result in an error. It’s safer, therefore, to use bracket notation:

starShips["Millennium Falcon"]
> Object {class: "Light Freighter", 
    manufacturer: "Corellian Engineering Corporation",
    beam: 34.75}

starShips["Millennium Falcon"]["class"]
> "Light Freighter"

We could take this nesting as deep as needed.

Much More

At this point, we’re only dealing with JSON as a variable inside an existing script, but it can be used in many other ways:

• loop through and present all the data in the JSON data structure
• read the JSON from a file on the same server
• read from an API, to use information provided by another site

We’ll be looking at these possibilities and more in the very near future.

JSON vs MySQL

As they are both fundamentally ways of storing and retrieving data, it might be tempting to confuse JSON with databases such as MySQL. While the line may blur between the two, there are still important differences:

• JSON files are usually read “all in one”: that is, you must load the entire .json file in order to get or change any piece of information. MySQL does not have this limitation: it acts only on the information you request, and thus tends to be faster for large information caches.
• Databases have much more focus on performance and security; JSON lacks these almost entirely.
• In general, MySQL has much more powerful tools for finding, gathering and analysing information than JSON.

You might consider the difference between JSON and MySQL as the difference between short-term and long-term memory, or like passing notes in class versus writing a book. JSON tends to be light, temporary and arbitrary; MySQL is long-term, permanent and robust.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.