JSON

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Mattia A. Fritz (discussion) 23 février 2017 à 16:33 (CET)

Introduction

JSON, acronyme de JavaScript Object Notation, est un format d’échange de données utilisé surtout dans le web, où ce format est en train de remplacer XML (qui reste néanmoins prépondérant, surtout dans les milieux pédagogiques). Par rapport à XML, JSON se caractérise par un format plus léger, qui ne prévoit pas des balises, mais exclusivement des associations clé-valeur similaire aux objets JavaScript (voir Tutoriel JavaScript de base). Voici de suite un exemple le contenu d'un fichier JSON :

{
  "page" : "JSON sur EduTechWiki",
  "url" : "http://edutechwiki.unige.ch/fr/JSON",
  "info" : {
    "createdAt" : "2017-02-23",
    "createdBy" : "MAF",
    "isPublic" : true,
    "numberOfClick" : 100,
    "responseTime" : 0.567
  }
}

JSON est également une extension de fichier .json qui est définit par un MIME type application/json.

Les avantages de JSON concerne :

• Pas d'entête nécessaire (à discuter si c'est vraiment un avantage...) ;
• La facilité de lecture pour les personnes (i.e. human-readable format) ;
• La facilité de parsing par les machines ;
• À égalité de contenu, les fichiers JSON sont plus léger et comportent moins de caractères qu'un document XML ;
• Le format est pensé principalement pour fonctionner avec JavaScript (surtout requêtes asynchrones de type AJAX), mais on peut utiliser JSON avec tout langage de programmation ;
• Si utilisé avec JavaScript, les contenus des fichiers .json est incorporé très facilement (voir automatiquement dans certains cas) en tant qu'objet, donc on peut par la suite accéder aux différents valeurs à travers la notation par point :
  • jsonFileContent.page --> "JSON sur EduTechWiki"
  • jsonFileContent.info.numberOfClick --> 100

Par contre, comparé à XML, JSON ne propose pas la possibilité de définir des attributs, si ce n'est à travers des "sous-clés" dans un même objet, par exemple :

{
  "link" : {
    "label" : "Please visit EduTechWiki",
    "href" : "http://edutechwiki.unige.ch/",
  }
}

Cadres d'utilisation de JSON

JSON est utilisé de plusieurs manières. Voici de suite une liste non exhaustive dont certains points seront repris plus en détail par la suite :

• Échange de données de manière asynchrone à travers le Browser (voir également AJAX) ;
• Format de réponse des RESTful API (voir par exemple la page JSON générée par l'API de ce wiki qui liste les 10 premières appartenant à la catégorie JavaScript)
• Fichiers de configuration/préférence de logiciel (e.g. Visual studio code)
• ...

Anatomie d'un fichier JSON

Un fichier JSON respecte la notation clé-valeur d'un objet JavaScript avec deux différences fondamentales :

1. On peut utiliser exclusivement des doubles guillemets "..." et non pas '...'
2. Même les clés doivent utiliser les doubles guillemets

{
 "myKey": "myValue"
}

Si vous avez plusieurs associations clés-valeurs, il faudra les séparer avec une virgule après la valeur :

{
  "firstKey" : "firstValue",
  "secondKey" : "secondValue",
  "thirdKey" : "thirdValue"
}

Pour être précis, la dernière association clé-valeur ne doit pas avoir une virgule à la fin, mais souvent les choses marchent même si vous la mettez.

Les types de valeurs acceptés sont les suivants :

• Des suites de caractères (i.e. String)
• Des valeurs booléen (true ou false)
• Des chiffres entiers ou décimal (i.e. Number)
• Valeur null
• Des objects (i.e des "sous-associations" clé-valeur)
• Des listes d'éléments (i.e. Array)

Suite de caractères

L'association avec une donnée de type String se fait tout simplement en utilisant les doubles guillemets autour du texte :

{
  "course" : "STIC I"
}

Valeurs booléen

Pour les valeurs de type vrai/faux, il ne faut par contre pas utiliser les guillemets :

{
  "isPublic" : true,
  "isOpen" : false
}

Chiffres

Pour les chiffres également il n'est pas nécessaire d'utiliser des guillemets, que ce soit pour des chiffres entiers ou décimal :

{
  "numberOfCredits" : 6,
  "hoursPerDay" : 2.5
}

Valeur null

Vous pouvez associer à une clé une valeur null :

{
  "valeurNulle" : null
}

Objets

On peut très facilement "emboîter" des objets, c'est-à-dire associer à un clé un autre suite d'associations clés-valeurs :

{
  "course": {
    "name": "STIC I",
    "numberOfCredits": 6,
    "info": {
      "dayOfWeek": "Friday",
      "place": "Uni-Pignon",
      "room": "S01",
      "timetable": {
        "morning": {
          "startAt": "09:00",
          "stopAt": "12:30"
        },
        "afternoon": {
          "startAt": "14:00",
          "stopAt": "17:00"
        }
      }
    }
  }
}

Si on veut savoir à quelle heure se termine le cours le soir, on peut le récupérer en traversant l'objet avec la notation par points :

 course.info.timetable.afternoon.stopAt --> 17:00

Listes (Array)

Enfin, on peut également utiliser des listes. Les listes peuvent se composer de toutes les autres types de données illustrés plus haut.

Liste "simple"

{
  "coursesStic" : ["STIC I", "STIC II", "STIC III", "STIC IV"]
}

Liste composite

{
  "mixed" : [1, 2, 3, "A", "B", "C"]
}

Liste d'objets

{
  "courses" : [{
    "name" : "STIC I",
    "semester" : "A"
  }, {
    "name": "STIC II",
    "semester" : "P"
  }]
}

On peut récupérer les différents objets d'une liste par leur index dans l'array (à partir de 0) :

courses[0].name --> STIC I
courses[1].semester --> P

Utilisation de JSON pour des requêtes asynchrones dans le browser (AJAX)

L'une des applications les plus répandues de JSON est dans le cadre des requêtes asynchrones qui sont envoyées par une page web. Ce type de mécanisme, connu sous le nom de AJAX, a été introduit pour éviter d'avoir à recharger une page chaque fois qu'il y a un changement. C'est le mécanisme qui est à la base du Web 2.0, mais qui a ultérieurement évolué dans le temps. L'une de ces évolutions concerne justement le type de document généralement utilisé pour récupérer des nouvelles informations d'une autre page. AJAX est à l'origine l'acronyme de Asynchronous JavaScript and XML, mais le format d'échange n'est pas forcément XML. Au contraire, JSON est justement en train de s'imposer en tant que format d'échange d'informations structurés en réponse à une requête asynchrone.

L'avantage de JSON par rapport à XML concerne principalement la facilité de parsing, c'est-à-dire la possibilité d'incorporer les données récupérées à travers la requêtes asynchrone directement dans le code de la page qui en a fait demande à travers JavaScript.

JSON.parse() et JSON.stringify()

Au niveau pratique, cette incorporation peut se faire, en vanilla JavaScript, à travers la fonction

JSON.parse(contenu JSON); //--> from JSON text to JavaScript object

Cette fonction permet de parser une suite de caractères en format JSON et de le transformer dans un objet JavaScript. Par exemple :

var contentJSON = '{ "name" : "STIC I", "credits" : 6 }'; //Le JSON est reçu en tant que suite de caractères
var contentJavaScript = JSON.parse(contentJSON);
console.log(contentJavaScript.name); //--> STIC I