JSON Video Tutorial: JSON

In this video I invite you to discover the JSON format (JavaSscript Object NOTotation) which is a textual data format easily readable by humans. It is derived from JavaScript object notation and is widely used on the web to exchange information with third-party services.

The format makes it possible to represent 6 types of data. If you need more details on the syntax you can look at the json.org page. Each of these types can be used as a JSON document.

Scalar types

Numbers

Numbers are written in the classic way (with a . for decimals) and the possibility of using scientific notation.

1
140
-3
1.5
10e10

Character strings

Character strings is a series of unicode characters delimited by double quotes. It is possible to use escaping with backslashes to represent specific characters such as line breaks or tabs.

"Bonjour les gens"
"Je veux mettre du \"texte\" entre guillemet"
"Je saute\nune ligne"

Booleans

Booleans are used to represent a true or false value.

true
false

null

This value is used to indicate the absence of a value.

null

Compound types

These types make it possible to represent more complex values ​​by using a combination of several types.

The tables

Arrays are used to represent a list of values ​​and are delimited by square brackets []. The values ​​are separated by ,.

["valeur", 3, true]

It is possible to insert spaces around the punctuation, this allows for example to indent to make the content more readable.

[
  "Valeur 1",
  "Valeur 2",
  "Valeur 3"
]

Finally, an array can contain in value an array and also an object.

["valeur", ["tableau", "imbriqué"]]

Objects

Objects are sets of key/value pairs that can represent complex concepts. These objects will be delimited by braces {}.

{
  "firstname": "John",
  "lastname": "Doe",
  "age": 18
}

Values ​​can be of any type (and even be an object)

{
  "firstname": "John",
  "lastname": "Doe",
  "age": 18,
  "job": {
    "name": "Développeur web",
    "startHour": 9,
    "endHour": 19
  }
}

Example

Here is an example of a json document to represent a article and his comments.

{
    "title": "Tutoriel JSON",
    "content": "...",
    "author": {
        "firstname": "Jonathan",
        "lastname": "Boyer",
        "birthyear": 1987
    },
    "comments": [
        {
            "username": "John Doe",
            "content": "Super tutoriel",
            "replies": []
        }, {
            "username": "Jane Doe",
            "content": "J'ai bien aimé ce tutoriel",
            "replies": [
                {
                    "username": "John Doe",
                    "content": "...",
                    "replies": []
                }
            ]
        }
    ]
}

Derivative format and tools

Technologies and variations have developed around this format.

JSON Schema

JSON Schema is a specification that defines a way to create a schema to annotate and validate a JSON document. This schema is defined using JSON format.

{
  "$id": "https://example.com/address.schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "An address similar to http://microformats.org/wiki/h-card",
  "type": "object",
  "properties": {
    "post-office-box": {
      "type": "string"
    },
    "extended-address": {
      "type": "string"
    },
    "street-address": {
      "type": "string"
    },
    "locality": {
      "type": "string"
    },
    "region": {
      "type": "string"
    },
    "postal-code": {
      "type": "string"
    },
    "country-name": {
      "type": "string"
    }
  },
  "required": [ "locality", "region", "country-name" ],
  "dependentRequired": {
    "post-office-box": [ "street-address" ],
    "extended-address": [ "street-address" ]
  }
}

JSONC

Short for “JSON with Comments”, this format is visible in the editor configuration Visual StudioCode and allows you to insert comments in addition to the elements that we have seen previously.

• // to write a one-line comment.
• /* and */ to delimit a multi-line comment.