In this video we will cover everything you need to know about JSON in only 10 minutes. We will cover what JSON is, why JSON is important, what JSON is used for, the syntax of JSON, and multiple examples of JSON. JSON is the most popular data representation format, and is one of the most important, and easiest concepts you can learn in programming. It allows you to create APIs, config files, and structured data. We will be covering all of the terminology, and going through live examples of all the different JSON types.

What is JSON?

JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. Squarespace uses JSON to store and organize site content created with the CMS.

Example

Append ?format=json-pretty to the URL of any page site and you’ll be able to view the JSON data for the site.

Keys and Values

The two primary parts that make up JSON are keys and values. Together they make a key/value pair.

• Key: A key is always a string enclosed in quotation marks.
• Value: A value can be a string, number, boolean expression, array, or object.
• Key/Value Pair: A key value pair follows a specific syntax, with the key followed by a colon followed by the value. Key/value pairs are comma separated.

Let’s take one line from the JSON sample above and identify each part of the code.

"foo" : "bar"

This example is a key/value pair. The key is “foo” and the value is “bar”.

Types of Values

• Array: An associative array of values.
• Boolean: True or false.
• Number: An integer.
• Object: An associative array of key/value pairs.
• String: Several plain text characters which usually form a word.

Numbers, booleans and strings are self-evident, so we’ll skip over those sections. Arrays and Objects are explained in more depth below.

Arrays

Almost every blog has categories and tags. In this example we’ve added a categories key, but the value might look unfamiliar. Since each post in a blog can have more than one category, an array of multiple strings is returned.

"foo" : {
  "bar" : "Hello",
  "baz" : [ "quuz", "norf" ]
}

Objects

An object is indicated by curly brackets. Everything inside of the curly brackets is part of the object. We already learned a value can be an object. So that means “foo” and the corresponding object are a key/value pair.

"foo" : {
  "bar" : "Hello"
}

The key/value pair “bar” : “Hello” is nested inside the key/value pair “foo” : { … }. That’s an example of a hierarchy in JSON data.

Recap

We said at the beginning of this tutorial that JSON is a minimal data format. Just by learning a few key principles you can decode an entire site’s worth of JSON.