Liens

• Une excellente introduction au format JSON par Louis Lazaris: https://la-cascade.io/articles/json-pour-les-debutants
• Un bon exercice: https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JSON (Voir ci-dessous)
• JSON sur Wikipedia
• JSON Formatter (Pour votre navigateur)
• Pour vous faire la main: https://jsonplaceholder.typicode.com/ ou https://reqres.in/

Qu'est-ce que JSON?

Le format a été découvert par Douglas Crockford au début des années 2000. Contrairement à ce que l'on pourrait croire à première vue, ceci n'est pas un objet javascript au sens strict. Vous ne pouvez pas trouver de fonctions dans un objet JSON, et les clés (keys) sont toujours entre guillements doubles. Ce formatage particulier en fait un format universel, utilisé avec de nombreux langages différents.

{
  "squadName" : "Super Hero Squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

TIP

Pour la conception d'interfaces web réactives, il peut être intéressant de se tourner vers des frameworks comme Vue.js

JSONP

JSONP ou JSON-P (pour JSON with padding, en français, « JSON avec formatage ») est une extension dans laquelle le nom de la fonction de retour est indiqué. L’idée originale proviendrait du blog de Bob Ippolito en 2005 et est maintenant répandue dans les applications Web 2.0. (Wikipedia)

JSONP utilise des balises de scripts, les appels sont ouverts. Ainsi, JSONP peut être inapproprié pour transporter des informations confidentielles.

• jsonp

Charger un fichier json avec P5js

let mesDonnees;

function preload() {
  let url = 'VOTRE_URL_POUR_LA_REQUETE';
  mesDonnees = loadJSON(url);
}

function setup() {
  // Utilisez vos données ici (ou dans le draw)
}

Si vous chargez vos données en dehors de la fonction preload(), il vous faut définir une fonction callback (qui ne s'exécutera que lorsque les données seront chargées..). Voici un exemple :

function setup() {
  let url = 'VOTRE_URL_POUR_LA_REQUETE';
  loadJSON(url, gotData); // Appellez cette fonction gotData comme vous voulez
}

function gotData(data) { // l'argument data contiendra vos données. Là aussi, appellez-le comme vous voulez
  console.log(data); // Faites quelque chose avec vos données
}

Charger un fichier json avec fetch

Dans cet exemple, le premier .then() attend que la promesse retournée par fetch soit résolue, puis appelle json() sur la réponse. Ce qui va convertir les données texte en objet JS. Le deuxième .then() attend que la promesse retournée par json() soit résolue, puis traite les données JSON converties. Ici, elle les affiche dans la console.

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json()) // Convertit les données JSON en objet JavaScript
      .then(json => console.log(json)) // Traite l'objet JavaScript

Charger un fichier json avec jsonp avec P5js

GeoJSON

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson

GeoJSON (de l'anglais Geographic JSON, signifiant littéralement JSON géographique) est un format ouvert d'encodage d'ensemble de données géospatiales simples utilisant la norme JSON (JavaScript Object Notation).

Il permet de décrire des données de type point, ligne, chaîne de caractères, polygone, ainsi que des ensembles et sous-ensembles de ces types de données et d'y ajouter des attributs d'information qui ne sont pas spatiales.

Le format GeoJSON, contrairement à la majorité des standards de systèmes d'informations géographiques, n'est pas écrit par l'Open Geospatial Consortium (OGC), mais par un groupe de travail de développeurs au travers d'internet. (Wikipedia)

• Leaflet.js
• D3.js