Convertir un objet JavaScript en JSON

1. Affichage d’un objet JavaScript avec console.log(jsObject)
2. Utilisation de JSON.stringify() pour convertir un objet JSON en chaîne
3. Utilisation de code écrit personnalisé pour convertir des objets JavaScript en JSON
4. Récupérer un objet JavaScript à partir d’une chaîne JSON

JSON est un format de transfert de données couramment utilisé pour représenter des objets en javascript. Nous utilisons le format JSON comme format standard dans la plupart des communications client-serveur pour le transfert de données. La notation JSON est facile à utiliser et à interpréter car il s’agit d’un format lisible par l’homme d’un objet JavaScript. Il est facile de convertir un objet javascript au format JSON. Nous pouvons le convertir des manières suivantes.

Affichage d’un objet JavaScript avec console.log(jsObject)

La fonction console.log est conçue pour envoyer des messages à la console Web. Nous pouvons afficher les messages en utilisant les outils de développement d’un navigateur Web. La fonction conosle.log() accepte un objet, un message et même des sous-chaînes. Par conséquent, il est le mieux adapté pour nous aider à comprendre l’apparence d’un objet JavaScript. Lorsque nous console.log une variable contenant un objet, nous obtenons sa représentation visuelle JSON. Le code suivant décrit la représentation d’un objet javascript à l’aide du console.log.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(a);

Production:

{id: 1, name: "icy-cream", flavor: "vanilla"}

Dans le code ci-dessus, console.log(a) renvoie le format JSON de l’objet a. Nous recevrons la même représentation JSON sur tous les navigateurs pour l’objet javascript, car le conosle.log() est pris en charge sur tous les navigateurs, y compris l’explorateur Internet peu convivial. Grâce à l’option console.log(), nous ne pouvons afficher que la représentation JSON d’un objet et ne pouvons pas l’éditer ou l’utiliser pour d’autres traitements de données programmatiques autres que de simplement le voir dans la console Web.

Utilisation de JSON.stringify() pour convertir un objet JSON en chaîne

Une autre façon d’obtenir la représentation JSON d’un objet javascript consiste à utiliser la méthode JSON.stringify(). Nous pouvons utiliser le format JSON d’un objet JavaScript et l’affecter à des variables à l’aide de la méthode JSON.stringify(). JSON.stringify() convertit l’objet javascript et renvoie la valeur JSON de l’objet sous forme de données de chaîne.

Syntaxe

JSON.stringify(<JSObject>)

Paramètres

La fonction prend l’objet JavaScript comme paramètre, accepte une fonction replacer et space count comme paramètres facultatifs.

• Nous donnons à notre objet JavaScript cible à convertir en JSON comme premier paramètre de la fonction JSON.stringify().
• Nous utilisons la fonction replacer pour modifier l’objet JSON. En l’utilisant, nous pouvons spécifier les attributs que nous souhaitons filtrer de l’objet avant de le convertir au format JSON.
• Le paramètre space count est une valeur numérique ou une valeur de chaîne spécifiant le nombre de caractères d’espace à mettre dans la chaîne JSON de sortie pour la rendre dans un format lisible par l’homme.

Valeur de retour

JSON.stringify() renvoie le format JSON de chaîne de l’objet JavaScript.

Utilisation

Utilisons le même objet que nous avons utilisé dans la section précédente. Mais cette fois, nous utiliserons le JSON.stringify() pour le convertir en une chaîne JSON. Référez-vous au code suivant.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

Production:

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

En utilisant un nombre dans le troisième paramètre de la fonction JSON.stringify(), nous obtenons une chaîne JSON plus lisible en tant que sortie. La méthode formatera le JSON en ajoutant le nombre d’espaces spécifié avant chaque paire clé-valeur du JSON. Par exemple, dans JSON.stringify(a, null, 5), le paramètre id de l’objet a est placé après cinq espaces.

Utilisation de code écrit personnalisé pour convertir des objets JavaScript en JSON

Si nous devons écrire notre code pour convertir l’objet JavaScript au format JSON, nous devrons utiliser la fonction Object.keys(). Object.keys() est une méthode javascript qui extrait les keys d’un objet et retourne un tableau contenant les keys. Par conséquent, avec notre code personnalisé, nous combinons les keys et les values de l’objet javascript et les englobons dans les accolades {} pour obtenir la représentation JSON de l’objet javascript. Regardons le code ci-dessous.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
var keys = Object.keys(a);
var JSONOut = '{';
for (let i = 0; i < keys.length; i++) {
  JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + '}';
console.log(JSONOut);

Production:

{"id":"1","name":"icy-cream","flavor":"vanilla",}

Récupérer un objet JavaScript à partir d’une chaîne JSON

Dans la plupart des applications Web, nous stockons les objets javascript sous forme de chaîne JSON dans la base de données afin qu’il soit facile de les utiliser pour restituer la même interface utilisateur ultérieurement. Nous pouvons stocker le JSON dans la base de données comme une chaîne JSON. Comment récupérer le JSON ou l’objet JavaScript correspondant à la chaîne JSON extraite de la base de données à l’aide d’une API REST ? JavaScript a la méthode JSON.parse() pour reconvertir le JSON en objet JavaScript. Référez-vous au code suivant.

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

Production:

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

En utilisant le code ci-dessus, nous avons reconverti la chaîne JSON en objet javascript par la méthode JSON.parse() et l’avons affectée à une variable. Changer la valeur de l’attribut id du même objet javascript change également la valeur de l’attribut. Par conséquent, nous pouvons convertir la chaîne JSON en un objet javascript valide que nous pouvons gérer par programmation dans le code. Notez que nous pouvons utiliser le caractère tilde pour accepter une chaîne avec plusieurs sauts de ligne.