Maîtriser la gestion JSON en JavaScript : analyse et chaîne

Gestion JSON en JavaScript (analyse et chaîne)

JSON (JavaScript Object Notation) est un format d'échange de données léger, facile à lire et à écrire pour les humains et facile à analyser et à générer pour les machines. JavaScript fournit des méthodes intégrées pour analyser les chaînes JSON en objets et convertir des objets en chaînes JSON.

---

1. Analyse des chaînes JSON

La méthode JSON.parse() est utilisée pour convertir une chaîne JSON en un objet JavaScript.

Syntaxe

JSON.parse(text[, reviver]);

• text : La chaîne JSON à analyser.
• reviver (facultatif) : Une fonction pour transformer l'objet analysé avant de le renvoyer.

Exemples

A. Analyse simple

const jsonString = '{"name": "John", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // Output: John
console.log(parsedData.age);  // Output: 30

B. Utiliser une fonction Reviver
La fonction Reviver peut être utilisée pour personnaliser le processus d'analyse.

const jsonString = '{"name": "John", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // Convert birth year to age
  }
  return value;
});
console.log(parsedData.birthYear); // Output: 34

Gestion des erreurs

Toujours envelopper JSON.parse() dans un bloc try...catch pour gérer le JSON non valide.

const invalidJson = "{name: 'John', age: 30}"; // Invalid JSON (keys must be in quotes)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

---

2. Stringifier des objets JavaScript

La méthode JSON.stringify() convertit un objet JavaScript en chaîne JSON.

Syntaxe

JSON.stringify(value[, replacer[, space]]);

• value : l'objet à chaîner.
• replacer (facultatif) : une fonction ou un tableau pour filtrer les propriétés.
• espace (facultatif) : ajoute une indentation pour une meilleure lisibilité.

Exemples

A. Stringification simple

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // Output: {"name":"John","age":30}

B. Utiliser une fonction de remplacement
La fonction de remplacement filtre ou transforme les propriétés de l'objet.

const data = { name: "John", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // Exclude passwords
  return value;
});
console.log(jsonString); // Output: {"name":"John","age":30}

C. Ajout d'une indentation
Le paramètre space formate la sortie avec indentation.

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// Output:
// {
//   "name": "John",
//   "age": 30
// }

Gestion des erreurs

Les références circulaires dans les objets provoquent une erreur de JSON.stringify().

const circularObject = {};
circularObject.self = circularObject;
try {
  JSON.stringify(circularObject);
} catch (error) {
  console.error("Cannot stringify circular object:", error.message);
}

---

3. Cas d'utilisation pratiques

A. Envoi de données à un serveur

Convertissez un objet JavaScript en chaîne JSON avant de l'envoyer dans une requête HTTP.

const data = { name: "John", age: 30 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

B. Stockage des données dans le stockage local

Enregistrez et récupérez les données au format JSON à l'aide de localStorage.

const data = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // Storing data

const userData = JSON.parse(localStorage.getItem("user")); // Retrieving data
console.log(userData.name); // Output: John

C. Objets de copie approfondie

Utiliser les méthodes JSON pour créer une copie complète d'un objet (ne fonctionne pas pour les fonctions ou les références circulaires).

JSON.parse(text[, reviver]);

---

4. Différences entre les objets JSON et JavaScript

JSON	JavaScript Object
Text format (string)	In-memory data structure
Keys must be strings (quoted)	Keys can be strings or symbols
Cannot store methods/functions	Can store methods/functions

---

5. Résumé

• Utilisez JSON.parse() pour convertir les chaînes JSON en objets JavaScript.
• Utilisez JSON.stringify() pour convertir des objets JavaScript en chaînes JSON.
• JSON est essentiel pour l'échange de données dans les applications web, notamment avec les API et le stockage local.
• Toujours gérer les erreurs lors de l'analyse ou de la chaîne JSON.

La maîtrise de la gestion JSON est une compétence essentielle pour créer des applications Web modernes basées sur les données.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!