Tutoriel vidéo JSON : Le format JSON

Dans cette vidéo je vous propose de découvrir le format JSON (JavaScript Object Notation) qui est un format de données textuelles facilement lisible par les humains. Il est dérivé de la notation des objets JavaScript et est très utilisé dans le web pour échanger des informations avec des services tiers.

Le format permet de représenter 6 types de données. Si vous avez besoin de plus de détails sur la syntaxe vous pouvez regarder la page json.org. Chacun de ces types peut être utilisé comme document JSON.

Types scalaires

Les nombres

Les nombres s'écrivent de manière classique (avec un . pour les décimales) et la possibilité d'utiliser la notation scientifique.

Les chaînes de caractères

Les chaînes de caractères est une suite de caractères unicode délimitée par des guillemets doubles. Il est possible d'utiliser l'échappement avec des antislash pour représenter certains caractères spécifiques comme des sauts de lignes ou des tabulation.

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

Les booléens

Les booléens permettent de représenter une valeur vrai ou fausse.

true
false

La valeur null

Cette valeur permet d'indiquer l'absence de valeur.

null

Types composés

Ces types permettent de représenter des valeurs plus complexes en utilisant une combinaison de plusieurs types.

Les tableaux

Les tableaux permettent de représenter une liste de valeur et sont délimité par des crochets []. Les valeurs sont séparées par des virgules (,).

["valeur", 3, true]

Il est possible d'insérer des espaces autour de la ponctuation, cela permet par exemple d'indenter pour rendre le contenu plus lisible.

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

Enfin, un tableau peut contenir en valeur un tableau et aussi un objet.

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

Les objets

Les objets sont un ensembles de paires clé / valeur qui permet de représenter des concepts complexes. Ces objets seront délimité par des accolades {}.

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

Les valeurs peuvent être de n'importe quel type (et même être un objet)

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

Exemple

Voici par un exemple un document json permettant de représenter un article et ses commentaires.

{
    "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": []
                }
            ]
        }
    ]
}

Format dérivés et outils

Des technologies et des variations se sont développées autour de ce format.

JSON Schema

JSON Schema est une spécification qui définit une manière de créer un schéma pour annoter et valider un document JSON. Ce schéma est définit à l'aide du format JSON.

{
  "$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

Diminutif de "JSON with Comments", ce format est visible dans la configuration de l'éditeur Visual Studio Code et permet d'insérer des commentaires en plus des éléments que l'on a vu précédemment.