Formation PUB040 : JavaScript et autres bibliothèques côté client, 2020 JavaScript

2.9 Manipulations JSON en JavaScript


Dans du code JavaScript, il est possible de transformer une variable au format JSON ou l'inverse.

Voici quelques lignes directrices pour vous aider.

Transformer une variable en chaîne JSON : JSON.stringify()

La méthode JSON.stringify() vous permet de convertir un tableau ou un objet en chaîne JSON.

L'action de transformer un type complexe en chaîne se nomme sérialisation.

La sérialisation permet à votre programme de passer de l'information complexe en paramètre à une fonction ou encore de la transférer dans un appel à un serveur.

JavaScript

var tableauAssociatif = {
    "prenom": "Annie",
    "nomFamille": "Gagnon"
};

var chaine = JSON.stringify(tableauAssociatif);   // chaine = '{"prenom":"Annie","nomFamille":"Gagnon"}'

Transformer une chaîne JSON en son type original

Vous avez en main une chaîne JSON et vous désirez la manipuler plus facilement dans votre code JavaScript? Il est possible de la convertir en son type original, par exemple un type simple (string, number, boolean), un objet, un tableau.

La méthode à utiliser pour transformer une chaîne JSON en son type original dépend du type de la variable qui contient l'information à transformer.

L'action de transformer une chaîne sérialisée vers son type original se nomme désérialisation.

JSON.parse()

Si vous avez en main une variable qui contient directement la chaîne JSON, vous pourrez la désérialiser à l'aide de JSON.parse().

JSON.parse() est l'opération inverse de JSON.stringify().

JavaScript

let tableauAssociatif = JSON.parse(chaine);
let prenom = tableauAssociatif['prenom'];

let nomFamille = tableauAssociatif['nomFamille'];

Response.json()

Dans une instruction fetch(), lorsque le programme JavaScript reçoit une réponse HTTP du serveur, l'instruction then reçoit en paramètre un objet de type Response.

La classe Response offre une méthode .json() qui permet de désérialiser le corps de la réponse HTTP.

JavaScript

fetch('https://url/du/service', {
    method: 'POST',
    ...
}).then((res) => {
    return res.json();
}).then((body) => {
    let nomComplet = body.nomComplet;
    ...
}).catch((e) => {
    ...
});

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre