Un tutoriel sur l'utilisation de JSON.parse() et JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Un tutoriel sur l'utilisation de JSON.parse() et JSON.stringify()

JSON signifie JavaScript Object Notation. Il est utilisé pour décrire JavaScript les objets. C'est un format de partage de données qui spécifie les valeurs de données à l'aide de paires clé-valeur. L'objet JSON est pris en charge par tous les principaux navigateurs. Ce tutoriel nécessite que vous soyez familier avec JavaScript et la manipulation de l'objet JSON. Pour vous familiariser avec le JSON, vous pouvez jeter un œil à notre aperçu du format de partage de données JSON. Vous pouvez également découvrir comment travailler avec JSON en JavaScript.

Le format JSON est également utilisé pour transmettre des données sur le réseau. À cette fin, les données doivent être sérialisées et désérialisées. Lorsque les données sont au format JSON, elles sont converties en une chaîne de caractères à l'aide de la méthode stringify . Pour reconvertir les données au format objet afin de les manipuler, la méthode parse est utilisée. Ce tutoriel va passer en revue les étapes d'utilisation de JSON.parse() et JSON.stringify(). Commençons !

JSON.parse()

Cette méthode est utilisée pour convertir une chaîne JSON en un objet JSON afin qu'elle puisse être manipulée par programmation. La chaîne transmise doit être une chaîne JSON valide, sinon une exception sera levée. Cette chaîne peut être reçue de n'importe quel service web ou application distante.

Cette méthode accepte deux paramètres : une chaîne et une fonction de rappel qui peut être utilisée pour manipuler la chaîne avant de la convertir en objet. Supposons que nous recevions un message d'un service web indiquant le statut de l'action, le message et le code de statut. Vous trouverez ci-dessous un exemple simple de la façon dont une chaîne peut être convertie en objet.

Code :

let json_string = '{"message":"Terminé avec succès", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Terminé avec succès", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Sortie :

{message: 'Terminé avec succès', status: 200, code: 200}

1	{message: 'Terminé avec succès', status: 200, code: 200}

Un problème courant survient lorsque des virgules de fin sont ajoutées à la chaîne, de sorte que JSON.parse() lève une erreur si la chaîne qui lui est transmise contient des virgules de fin. Si vous devez manipuler les valeurs, vous pouvez transmettre la fonction de rappel en tant que second argument.

Code :

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Sortie :

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

La méthode stringify fait exactement le contraire de la méthode parse . Ici, l'objet JSON est transmis et la valeur de retour est une chaîne. Cette chaîne peut être transmise à un autre service web distant, par exemple, puis analysée à nouveau en un objet JSON pour manipulation.

Code :

let obj = {message:"Terminé avec succès", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Terminé avec succès", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Sortie :

{"message":"Terminé avec succès","status":200,"code":200}

1	{"message":"Terminé avec succès","status":200,"code":200}

La méthode stringify peut prendre deux arguments : les méthodes replaceret spacer . La méthode replacer peut être utilisée pour remplacer ou exclure des valeurs dans la chaîne.

Code :

let obj = {message:"Terminé avec succès", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Terminé avec succès", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Sortie :

{"message":"Terminé avec succès","status":200,"code":200}

1	{"message":"Terminé avec succès","status":200,"code":200}

Lorsque l'argument spacer est fourni, chaque élément d'un tableau ou d'un objet est placé sur sa propre ligne et indenté pour indiquer sa profondeur dans la hiérarchie des objets et des tableaux. Voici un court extrait de code illustrant cela.

Code :

let obj = {message:"Terminé avec succès", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Terminé avec succès", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Sortie :

{
---"message": "Terminé avec succès",
---"status": 200,
---"code": 200
}

{

---"message": "Terminé avec succès",

---"status": 200,

---"code": 200

}

Conclusion

Dans ce tutoriel, nous avons examiné deux méthodes utiles pour travailler avec du contenu au format JSON. Les objets JSON sont partout et, lors de la création d'applications modernes à l'aide de JavaScript, ces méthodes sont très utiles. Pour en savoir plus, consultez les tutoriels suivants sur notre blog:

Bonne programmation !

Hark Labs

Auteur · CloudSigma

Preslav Dobrev est un designer créatif chez CloudSigma, axé sur une identité commerciale cohérente à travers des canaux marketing traditionnels et innovants. Il excelle à fusionner la vision artistique avec le marketing stratégique pour créer des récits de marque percutants.

Un tutoriel sur l'utilisation de JSON.parse() et JSON.stringify()

JSON.parse()

JSON.stringify()

Conclusion

Hark Labs

Commentaires