Example

Append ?format=json-pretty to the URL of any page on your Squarespace 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. And now you can apply that knowledge to developing Squarespace sites with JSON-T, the template language behind the Squarespace Developer platform.