Formatage JSON en JavaScript : Guide complet

JSON (JavaScript Object Notation) est un format léger d’échange de données fréquemment utilisé dans les applications web pour transmettre des données entre les serveurs et les clients. Les données JSON brutes, en particulier les objets complexes, peuvent être difficiles à lire. Heureusement, JavaScript offre des méthodes intégrées pour améliorer la lisibilité et la gestion de JSON.

Table des matières

• Mise en forme des objets JSON avec JSON.stringify()
• Remise en forme des chaînes JSON à l’aide de JSON.stringify() et JSON.parse()

Mise en forme des objets JSON avec JSON.stringify()

La méthode JSON.stringify() est l’outil principal pour convertir les objets JavaScript en chaînes JSON. Bien qu’elle produise par défaut une sortie compacte, le paramètre optionnel space contrôle la mise en forme. Ce paramètre spécifie le niveau d’indentation.

Considérons cet objet JavaScript :

const myDataObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    zip: "12345"
  },
  skills: ["JavaScript", "HTML", "CSS"]
};

Pour mettre cela en forme dans une chaîne JSON lisible, utilisez JSON.stringify() avec le paramètre space :

const formattedJson = JSON.stringify(myDataObject, null, 2); // 2 espaces pour l'indentation
console.log(formattedJson);

Cela produit :

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zip": "12345"
  },
  "skills": [
    "JavaScript",
    "HTML",
    "CSS"
  ]
}

Le 2 dans JSON.stringify(myDataObject, null, 2) définit l’indentation à 2 espaces. Ajustez cette valeur (par exemple, 4, ou « t » pour les tabulations) selon vos préférences. Le null est un espace réservé pour une fonction de remplacement (permettant des options de formatage plus avancées, abordées dans des tutoriels plus avancés).

Remise en forme des chaînes JSON à l’aide de JSON.stringify() et JSON.parse()

Pour les chaînes JSON mal formatées (par exemple, sur une seule ligne), combinez JSON.parse() et JSON.stringify() pour la remise en forme.

Exemple de chaîne JSON non formatée :

const unformattedJson = '{"name":"Jane Doe","age":25,"city":"New York"}';

Tout d’abord, analysez la chaîne en un objet JavaScript :

const jsonObject = JSON.parse(unformattedJson);

Ensuite, formatez l’objet en une chaîne JSON à l’aide de JSON.stringify() :

const formattedJson = JSON.stringify(jsonObject, null, 4); // 4 espaces pour l'indentation
console.log(formattedJson);

Résultat :

{
    "name": "Jane Doe",
    "age": 25,
    "city": "New York"
}

Ce processus en deux étapes nettoie efficacement le JSON mal formaté. Gérez toujours les erreurs potentielles de JSON.parse() (à l’aide d’un bloc try...catch) pour éviter les plantages inattendus de l’application.

En résumé, JSON.stringify(), avec ou sans JSON.parse(), offre un moyen simple de formater les données JSON en JavaScript, améliorant considérablement la lisibilité du code.