JSON methods, toJSON
Supposons que nous avons un objet complexe et que nous aimerions le convertir en chaîne,
l’envoyer par le réseau ou simplement le rendre (l’output) à des fins de journalisation.
Naturellement, une telle chaîne devrait inclure toutes les propriétés importantes.
Nous pourrions implémenter la conversion comme ceci:
let user = {
name: "John",
age: 30,
toString() {
return `{name: "${[Link]}", age: ${[Link]}}`;
}
};
alert(user); // {name: "John", age: 30}
… Mais au cours du développement, de nouvelles propriétés sont ajoutées, les anciennes
propriétés sont renommées et supprimées. Mettre à jour un tel toString à chaque fois peut
devenir pénible. Nous pourrions essayer de passer en boucle sur les propriétés qu’il contient,
mais que se passe-t-il si l’objet est complexe et qu’il contient des objets imbriqués ? Nous
aurions également besoin de mettre en œuvre leur conversion.
Heureusement, il n’est pas nécessaire d’écrire le code pour gérer tout cela. La tâche a déjà été
résolue.
[Link]
Le JSON (JavaScript Object Notation) est un format général pour représenter les valeurs et les
objets. Il est décrit comme tel dans le standard RFC 4627. Initialement, il était conçu pour
JavaScript, mais de nombreux autres langages disposent également de bibliothèques pour le
gérer. Il est donc facile d’utiliser JSON pour l’échange de données lorsque le client utilise
JavaScript et que le serveur est écrit sur Ruby/PHP/Java et bien d’autres.
JavaScript fournit des méthodes:
[Link] pour convertir des objets en JSON.
[Link] pour reconvertir JSON en objet.
Par exemple, nous allons [Link] un student (etudiant):
let student = {
name: 'John',
age: 30,
isAdmin: false,
courses: ['html', 'css', 'js'],
spouse: null
};
let json = [Link](student);
alert(typeof json); // nous avons une string!
alert(json);
/* JSON-encoded object:
{
"name": "John",
"age": 30,
"isAdmin": false,
"courses": ["html", "css", "js"],
"spouse": null
}
*/
La méthode [Link](student) prend l’objet et le convertit en une chaîne.
[Link]
Pour décoder une chaîne JSON, nous avons besoin d’une autre méthode nommée [Link].
La syntaxe:
let value = [Link](str, [reviver]);
str
La chaîne JSON à parse.
reviver
Fonction optionnelle (clé,valeur) qui sera appelée pour chaque paire (key, value) et
peut transformer la valeur.
Par exemple:
// stringified array
let numbers = "[0, 1, 2, 3]";
numbers = [Link](numbers);
alert( numbers[1] ); // 1
Ou pour les objets imbriqués:
let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends":
[0,1,2,3] }';
let user = [Link](userData);
alert( [Link][1] ); // 1
Le JSON peut être aussi complexe que nécessaire, les objets et les tableaux peuvent inclure
d’autres objets et tableaux. Mais ils doivent obéir au même format JSON.
Voici des erreurs typiques dans JSON écrit à la main (nous devons parfois l’écrire à des fins
de débogage):
let json = `{
name: "John", // Erreur: nom de propriété sans
guillemets
"surname": 'Smith', // Erreur: guillemets simples en valeur
(doit être double)
'isAdmin': false // Erreur: guillemets simples dans la
clé (doit être double)
"birthday": new Date(2000, 2, 3), // Erreur: aucun "nouveau" n'est
autorisé, seules les valeurs nues
"friends": [0,1,2,3] // Ici tout va bien
}`;
En outre, JSON ne prend pas en charge les commentaires. L’ajout d’un commentaire à JSON
le rend invalide.
Il y a un autre format nommé JSON5,qui autorise les clés non commentées, les commentaires,
etc. Mais il s’agit d’une bibliothèque autonome, pas dans la spécification du langage.
Le JSON standard est très strict, non pas parce que ses développeurs sont paresseux, mais
pour permettre une implémentation facile, fiable et très rapide de l’algorithme de conversion.
Utiliser Reviver
Imaginez, nous avons un objet stringified meetup sur le serveur.
Cela ressemble à ça:
// title: (meetup title), date: (meetup date)
let str = '{"title":"Conference","date":"2017-11-30T[Link].000Z"}';
… Et maintenant, nous devons le deserialize, pour le retourner en objet JavaScript.
Faisons-le en appelant [Link]:
let str = '{"title":"Conference","date":"2017-11-30T[Link].000Z"}';
let meetup = [Link](str);
alert( [Link]() ); // Error!
Whoops! Une erreur!
La valeur de [Link] est une chaîne, pour un objet [Link] [Link]
pourrait-il savoir qu’il devrait transformer cette chaîne enDate?
Passons à [Link] la fonction de réactivation en tant que second argument, qui renvoie
toutes les valeurs “en l’état”, mais date deviendra une Date :
let str = '{"title":"Conference","date":"2017-11-30T[Link].000Z"}';
let meetup = [Link](str, function(key, value) {
if (key == 'date') return new Date(value);
return value;
});
alert( [Link]() ); // ça fonctionne maintenant!
À propos, cela fonctionne aussi pour les objets imbriqués:
let schedule = `{
"meetups": [
{"title":"Conference","date":"2017-11-30T[Link].000Z"},
{"title":"Birthday","date":"2017-04-18T[Link].000Z"}
]
}`;
schedule = [Link](schedule, function(key, value) {
if (key == 'date') return new Date(value);
return value;
});
alert( [Link][1].[Link]() ); // ça fonctionne!
Résumé
JSON est un format de données qui possède son propre standard indépendant et ses
propres bibliothèques pour la plupart des langages de programmation.
JSON prend en charge les objets simples, les tableaux, les chaînes, les nombres, les
booléens et null.
JavaScript fournit des méthodes [Link] pour sérialiser en JSON et
[Link] pour lire depuis JSON.
Les deux méthodes prennent en charge les fonctions du transformateur pour une
lecture/écriture intelligente.
Si un objet a toJSON, alors il est appelé par [Link].
Exercices
Transforme l'objet en JSON et revenez en arrière
importance: 5
Transformez l’utilisateur en JSON puis relisez-le dans une autre variable.
let user = {
name: "John Smith",
age: 35
};
Exclure les backreferences
importance: 5
Dans les cas simples de références circulaires, nous pouvons exclure une propriété incriminée
de la sérialisation par son nom.
Mais parfois, nous ne pouvons pas simplement utiliser le nom, car il peut être utilisé à la fois
dans les références circulaires et dans les propriétés normales. Ainsi, nous pouvons vérifier la
propriété par sa valeur.
Écrivez la fonction de remplacement pour tout stringify, mais supprimez les propriétés qui
font référence à meetup:
let room = {
number: 23
};
let meetup = {
title: "Conference",
occupiedBy: [{name: "John"}, {name: "Alice"}],
place: room
};
// circular references
[Link] = meetup;
[Link] = meetup;
alert( [Link](meetup, function replacer(key, value) {
/* your code */
}));
/* result should be:
{
"title":"Conference",
"occupiedBy":[{"name":"John"},{"name":"Alice"}],
"place":{"number":23}
}
*/
let room = {
number: 23
};
let meetup = {
title: "Conference",
occupiedBy: [{name: "John"}, {name: "Alice"}],
place: room
};
[Link] = meetup;
[Link] = meetup;
alert( [Link](meetup, function replacer(key, value) {
return (key != "" && value == meetup) ? undefined : value;
}));
/*
{
"title":"Conference",
"occupiedBy":[{"name":"John"},{"name":"Alice"}],
"place":{"number":23}
}
*/
Ici, nous devons également tester la key=="" pour exclure le premier appel où il est normal
que la valeur soit meetup.
