JSON

JSON signifie Javascript Serial Object Notation

Traduction: Notation Sérialisée d'Objet Javascript.

C'est la notation d'un objet Javascript sous forme de string,
pour le faire transiter par le réseau, ou le stocker sur le disque côté serveur
(pour stocker des données sans base de données ni langage SQL).

Côté client, le string JSON reçu du serveur est transformé en objet JS avec
JSON.parse(string)

Pour permettre son envoi au serveur, l'objet JSON est transformé en string avec
JSON.stringify(obj)

Syntaxe JSON

Un objet JSON ressemble beaucoup à un objet ou un tableau Javascript.

Pour être valide, un string JSON
* Doit être entouré d'accolades, ou crochets si c'est un tableau
* Les noms de propriétés et les valeurs type string doivent être entourés de guillemets
* Les valeurs peuvent être: un string, un booleen, un entier, un nombre à virgule flottante
* Les valeurs doivent être sur une seule ligne: Pas de retour à la ligne ni de tab ni ' ni ", mettre \n \t \\' \"
* Il ne faut surtout pas mettre la dernière virgule (alors que JS le tolère)

Vérifier la syntaxe d'un string JSON à l'aide d'un validateur.
Validateurs JSON
jsonformatter.curiousconcept.com
jsonformatter.org

Outil pratique pour coloriser du JSON dans une page web Colorisateur syntaxique JSON → HTML

JS accède aux valeurs JSON

Javascript peut accéder aux valeurs à l'aide de la notation point / crochets.

On peut boucler sur les propriétés/valeurs d'un objet avec for of.

Exemple l'API REST d'Atmosud

BFMTV Marseille chaque jour se connecte à l'API REST d'ATMOSUD pour obtenir la qualité de l'air.
En passant à l'URL en paramètre la date et le code INSEE,
https://api.atmosud.org/iqa2021/commune/indices/journalier?dates_echeances=2025-07-01,2025-07-01&insee=13206

Le serveur ATMOSUD (pour qui j'ai été développeur, Linux/nginx/Python/PostgreSQL que du bonheur!)
répond du JSON:
{
  "13206":
  {
    "code_insee": "13206",
    "commune": "",
    "valeurs": {
      "2025-07-02": {
        "date_diffusion": "2025-07-01",
        "date_echeance": "2025-07-01",
        "echeance": 0,
        "majoritaire": ["o3"],
        "indice": {
          "couleur": "#FF5050",
          "qualificatif": "Mauvais"
        }
      }
    }
  }
}
Le 1er juillet 2025 l'air est mauvais dans le 6e arr avec comme polluant majoritaire l'Ozone O3.

Javascript
* Obtient la date du jour
* Envoie la requête en AJAX GET
* Transforme le string JSON reçu en objet Javascript avec JSON.parse(string)
pour mettre à jour l'interface.
const date = new Date();
let mois = date.getMonth() + 1; if(mois<10) mois = '0'+mois;
let jour = date.getUTCDate();   if(jour<10) jour = '0'+jour;
const strdate = date.getFullYear()+'-'+mois+'-'+jour

const url = 'https://api.atmosud.org/iqa2021/commune/indices/journalier?dates_echeances='+
  strdate+','+strdate+'&insee=13206';
console.log(url);

const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function(){
  const json = JSON.parse(xhr.responseText);
  const obj = json[13206].valeurs[strdate];
  console.log(obj.majoritaire+' '+obj.indice.couleur+' '+obj.indice.qualificatif);
};
xhr.send();

Exemple location d'appartement

Un site de location immobilière me donne les appartements à louer à Perpignan à moins de 500€/mois.
le serveur répond par un tableau:
[
  {
    "type": "Studio",
    "loyer_mensuel_euros": 492.25,
    "charges_incluses": true,
    "nombre_de_pièces": 1,
    "surface_m²": 25,
    "étage": 4,
    "chauffage": "individuel",
    "informations":["ascenseur","parking"]
  },
  {
    "type": "F2",
    "loyer_mensuel_euros": 499,
    "charges_incluses": true,
    "nombre_de_pièces": 2,
    "surface_m²": 32,
    "étage": 1,
    "chauffage": "individuel",
    "informations":["parking", "meublé", "balcon"]
  }
]

const s = `[
  {
    "type": "Studio",
    "loyer_mensuel_euros": 492.25,
    "charges_incluses": true,
    "nombre_de_pièces": 1,
    "surface_m²": 25,
    "étage": 4,
    "chauffage": "individuel",
    "informations":["ascenseur","parking"]
  },
  {
    "type": "F2",
    "loyer_mensuel_euros": 499,
    "charges_incluses": true,
    "nombre_de_pièces": 2,
    "surface_m²": 32,
    "étage": 1,
    "chauffage": "individuel",
    "informations":["parking", "meublé", "balcon"]
  }
]`;
const json = JSON.parse(s);
console.log(json[0].type, json[0].loyer_mensuel_euros+'€', json[0].informations[0]);
Ce qui donne dans la console:
Studio 492.25€ ascenseur








Lister les propriétés/valeurs

Si on ne connait pas les propriétés de l'objet on peut les énumérer avec for of:
console.log('1er appart:');
for (const [key, value] of Object.entries(json[0])) {
  console.log(`${key} → ${value}`);
}
Ce qui donne
 1er appart:
 type → Studio
 loyer_mensuel_euros → 492.25
 charges_incluses → true
 nombre_de_pièces → 1
 surface_m² → 25
 étage → 4
 chauffage → individuel
 informations → ascenseur,parking






Obtenir un fichier JSON avec AJAX
const xhr = new XMLHttpRequest()
xhr.open("GET", "data/produits.json")
xhr.onload = function() {
	articles = JSON.parse(this.responseText)
	console.log (articles[0].nom)
};
xhr.send()









Envoi d'un objet JSON au serveur
json = `{"prenom":"Jimi", "nom":"Hendrix"}`
const obj = JSON.parse(json)
obj.prenom='James Marshall'

const xhr = new XMLHttpRequest()
xhr.open("POST", "script.php")
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.onload = function(){
	console.log(this.responseText)
};
xhr.send('var=val&monProfil='+encodeURIComponent(JSON.stringify(obj)))

// Si le serveur en répond rien, 1 seule ligne suffit:
//navigator.sendBeacon("script.php", `var=val&monProfil=${json}`);

<?php
if(isset($_POST['monProfil'])){
	$obj = json_decode($_POST['monProfil']);
	echo $obj->prenom;
}
?>







indenter/compacter du JSON
Outil JS pour indenter/compacter du JSON