Convertir JSON en objet en JavaScript

Utilisez JSON.parse() pour convertir une chaîne au format JSON en valeur JavaScript. Pour un document JSON représentant un objet, le résultat est un objet JavaScript dont vous pouvez lire et utiliser les propriétés. L’analyse ne vérifie pas les règles propres à votre application, ne transforme pas les chaînes de date en objets Date et ne rend pas les valeurs non fiables sûres à utiliser en HTML. Les exemples ci-dessous présentent la conversion de base, la gestion d’une entrée mal formée, l’accès aux propriétés imbriquées et la conversion des dates.

Ce que renvoie l’analyse JSON

JSON est un format texte qui permet de représenter des valeurs telles que des objets, des tableaux, des chaînes, des nombres, des booléens et null. Une chaîne JSON est du texte ; après son analyse, JavaScript renvoie la valeur correspondante. Un document représentant un objet produit un objet, tandis qu’un tableau JSON produit un tableau. Le résultat de l’analyse n’est pas nécessairement un objet : le code doit tenir compte de la forme attendue de l’entrée.

La syntaxe JSON est plus stricte que celle des littéraux d’objet JavaScript. Les clés d’objet et les valeurs de type chaîne doivent utiliser des guillemets doubles, et JSON n’autorise ni commentaires, ni fonctions, ni virgules finales. Par exemple, {"name":"Ari","active":true} est du texte JSON, contrairement à {name: 'Ari', active: true}. Ces règles expliquent pourquoi un littéral d’objet JavaScript ne peut pas toujours être transmis directement à l’analyseur.

Convertir une chaîne JSON avec JSON.parse()

Transmettez la chaîne à JSON.parse(), puis utilisez la valeur renvoyée comme toute autre donnée JavaScript. Cet exemple analyse les données d’une personne et lit deux de ses propriétés :

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const jsonText = '{"name":"Ari","age":30}';
const person = JSON.parse(jsonText);

console.log(person.name);
console.log(person.age);

Le premier affichage correspond au nom et le second à l’âge, sous forme numérique. L’accès aux propriétés fonctionne parce que le document JSON représente un objet. Si votre entrée est déjà un objet JavaScript, ne le sérialisez pas simplement pour l’analyser de nouveau : JSON.parse() attend du texte JSON.

Gérer un JSON non valide

Si la chaîne est mal formée ou ne respecte pas la syntaxe JSON, JSON.parse() lève une SyntaxError. Interceptez cette erreur lorsque l’entrée peut provenir d’un fichier, d’une requête ou d’une autre source dont le format n’est pas garanti. Placez la gestion de l’erreur près de l’opération d’analyse afin que le code appelant puisse décider de la suite :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const jsonText = '{"name":"Ari",}';
let person;

try {
  person = JSON.parse(jsonText);
  console.log(person.name);
} catch (error) {
  console.log("Could not parse JSON");
}

Cet exemple affiche un bref message pour signaler la virgule finale incorrecte. Le message affiché dans le bloc de code reste en anglais. En production, vous pouvez consigner l’erreur dans les journaux de l’application ou afficher un message de validation utile. Évitez de journaliser des données sensibles ou de révéler aux utilisateurs des détails internes de l’erreur. Une analyse réussie confirme uniquement que le texte respecte la syntaxe JSON ; vérifiez séparément les propriétés requises et leurs types avant de vous y fier.

Lire des valeurs imbriquées

Les objets et tableaux imbriqués sont analysés en valeurs JavaScript imbriquées ; vous pouvez donc y accéder avec la notation habituelle des propriétés et des indices. L’exemple suivant lit une ville dans un objet d’adresse ainsi que le premier élément d’un tableau :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const jsonText = '{"person":{"name":"Ari","address":{"city":"Oslo"}},"scores":[8,9]}';
const data = JSON.parse(jsonText);

console.log(data.person.address.city);
console.log(data.scores[0]);

La structure attendue est importante : si person, address ou scores est absent ou d’un type différent, l’accès direct à une propriété peut ne pas fournir la valeur attendue par votre application. Si les données suivent un schéma, validez la valeur analysée avant d’accéder à des propriétés profondes. L’analyse ne fusionne pas non plus les objets et ne convertit pas les noms de propriétés ; elle recrée les valeurs représentées dans le texte JSON.

Convertir les chaînes de date après l’analyse

JSON ne possède pas de type date ; les dates sont donc représentées par des chaînes. L’analyse laisse ces chaînes inchangées. Après l’analyse, convertissez explicitement une propriété de date connue avec new Date(). Si la source représente un instant précis, utilisez une valeur au format ISO standard avec un indicateur de fuseau horaire :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const jsonText = '{"createdAt":"2024-01-15T12:30:00Z"}';
const data = JSON.parse(jsonText);
const createdAt = new Date(data.createdAt);

console.log(createdAt instanceof Date);

new Date() construit un objet JavaScript Date à partir de la chaîne ; Date() sans new renvoie une chaîne à la place. L’analyse des dates peut dépendre du format d’entrée : normalisez les dates à la frontière de vos données et vérifiez que la date obtenue est valide si la source n’est pas fiable. Ne convertissez que les champs que votre application considère comme des dates ; l’analyseur JSON ne les détecte pas automatiquement.