JSON

3

Le JSON, ou JavaScript Object Notation, tout comme le XML, est un format permettant de stocker de l’information structurée. Cependant, contrairement à ce dernier, sa structure est inspirée des objets JavaScript plutôt que du HTML. Ce qui le rend plus rapide à décoder, lire et écrire que le XML.

Par exemple, les informations relatives à la carrière de Ryan Reynolds en format JSON pourrait ressembler à ceci.

{
  "firstname": "Ryan",
  "lastname": "Reynolds",
  "picture": "https://ex.smnarnold.com/json/acteurs/ryan-reynolds.jpg",
  "movies": [
    {
      "name": "Pokémon Detective Pikachu",
      "year": 2019
    },
    {
      "name": "Deadpool 2",
      "year": 2018
    },
    {
      "name": "Deadpool",
      "year": 2016
    }
  ]
}

Structure

Le JSON s'écrit sous forme de définitions contenant chacune une clé et une valeur.

par exemple: clé : valeur

Règles de base

  • Il doit y avoir un objet {...} ou un tableau [...] à la racine du document englobant l'ensemble des définitions.
  • Chaque clé doit-être entre guillemets doubles.
    Par exemple: "firstname".

  • Un double point : doit séparer chaque clé de sa définition.
    Par exemple: "firstname": "Ryan".

  • Les valeurs peuvent avoir les formes suivantes:

    • Une string "Ryan"
    • Un nombre: 2019
    • Un boolean: true ou false
    • Un objet: {...}
    • Un tableau [...]
  • Chaque déclaration doit se terminer par une virgule ,, sauf si cette déclaration est la dernière de son bloc.

Extensions permettant de visualiser du JSON dans son navigateur:
JSONView Chrome/Edge et JSONView Firefox

Validateur de JSON: jsonlint.com

Exercice Pizzeria JSON 🍕

Utilisation

Le JSON peut être utilisé pour différentes raisons, notamment pour stocker des configurations:

Par exemple, des thèmes de couleurs.

Ou pour permettre de séparer le code du contenu.

Voir le CodePen de Simon Arnold (@smnarnold).

Il est donc possible d'utiliser le même code pour générer deux pages différentes simplement en remplaçant la source du json.

Par exemple, dans la démo précédente ☝️, il suffit de remplacer ryan-reynolds.json par margot-robbie.json afin d'obtenir une page à l'apparence similaire, mais avec les informations de Margot plutôt que celles de Ryan.

Le JSON est beaucoup plus facile à manipuler en JavaScript puisqu'il ressemble déjà aux objets JavaScript.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme