JSON, AJAX ET FETCH EN JAVASCRIPT

B-Présentation de JSON et utilisation en JavaScript

Avant de s’attaquer à l’Ajax, il convient de savoir ce qu’est JSON car cela va être l’un des formats privilégiés pour échanger des données entre pages.

·         Qu’est-ce que JSON ?

JSON (JavaScript Object Notation) est un format d’échange de données léger et donc performant. C’est un format de texte indépendant de tout langage mais utilisant des conventions familières aux programmeurs de la famille de langages C (incluant JavaScript et Python notamment).

JSON est une syntaxe pour sérialiser* des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs null. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.

*Sérialiser = mettre des données en série après les avoir converti dans un format donné. Par extension, la sérialisation est en informatique l’action de mettre des données sous forme binaire et de les écrire dans un fichier.

JSON peut représenter des nombres, des booléens, des chaînes, la valeur null, des tableaux (séquences de valeurs ordonnées) et des objets constitués de ces valeurs (ou d’autres tableaux et objets).

·         Les structures de données et leur représentation JSON

JSON est construit par rapport à deux structures :

• Une collection de paires nom / valeur. Dans les différents langages, ce type de structure peut s’appeler objet, enregistrement, dictionnaire, table de hachage, liste à clé ou tableau associatif.
• Une liste ordonnée de valeurs. Dans la plupart des langages, c’est ce qu’on va appeler tableau, liste, vecteur ou séquence.

En JSON, ces deux structures se retrouvent sous les formes suivantes :

• Un objet est un ensemble non ordonnées de pair nom : valeur. Un objet commence avec {et se termine avec}. Les noms sont suivis de : et les paires nom : valeur sont séparées par des ‘:’
• Un tableau est une collection ordonnée de valeurs. Un tableau commence avec [et se termine avec]. Les valeurs sont séparées par des ‘,’

Une valeur peut être une chaine de caractères entourées par des guillemets doubles, un nombre, un booléen, la valeur null, un objet ou un tableau.

Exemple de données au format JSON :

·         JSON et JavaScript

De nombreuses personnes pensent encore que JSON fait partie du langage JavaScript et n’est qu’un objet JavaScript. C’est faux : JSON est un format de texte indépendant de tout langage.

Comme c’est également un format d’échange de données et qu’il est très populaire, il fait sens que nombre de langages proposent aujourd’hui des outils pour faire la passerelle entre le langage en question et JSON.

En JavaScript, on possède ainsi un objet <strong>JSON</strong>. L’objet JavaScript global <strong>JSON</strong> possède deux méthodes pour interpréter du JSON et convertir des valeurs en JSON. :

Les méthodes <strong>parse ()</strong> et <strong>stringify ()</strong>.

La méthode <strong>parse ()</strong> analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l’objet décrit par cette chaîne. On peut lui passer une option en deuxième argument qui va prendre la forme d’une fonction permettant transformer la valeur analysée avant de la transformer.

La méthode <strong>stringify()</strong> convertit une valeur JavaScript en chaîne JSON. On peut lui passer une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l’objet à inclure dans la chaîne JSON en deuxième argument facultatif.

On peut finalement lui passer un objet <strong>String</strong> ou <strong>Number</strong> en troisième argument facultatif qui va être utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.

Pour faire très simple, vous pouvez retenir que <strong>JSON.stringify ()</strong> convertit des objets JavaScript en JSON tandis que <strong>JSON.parse</strong> () fait l’opération inverse et convertit du JSON en objet JavaScript.

<body>
    <h1>JSON</h1>
    <div id="resultat"></div>

    <script>
        let utilisateur = {
            "prenom": "Pierre",
            "nom": "Giraud",
            "adresse": {
                "rue": "30 Impasse des Lilas",
                "ville": "Toulon",
                "cp": 83000,
                "pays": "France"
            },
            "mails": [
                "pierre.giraud@edhec.com",
                "pierre@pierre-giraud.com"
            ]
  };
   let json = JSON.stringify(utilisateur);
   document.getElementById("resultat").innerHTML = 
    "Type de la variable : " + typeof(json) + "<br>Contenu de la variable : " + json;
    </script>
</body>

Retour Plan cours