logo oujood
🔍

JSON : comment convertir un texte JSON en objet JavaScript

JSON.parse() est la méthode standard pour transformer une chaîne JSON en objet JavaScript exploitable dans une page web. Voici comment l'utiliser correctement.

OUJOOD.COM

Le cas d'usage le plus fréquent de JSON, c'est la communication entre un serveur et un navigateur. Le serveur envoie une réponse sous forme de texte JSON — une simple chaîne de caractères. Le navigateur doit ensuite transformer ce texte en objet JavaScript pour pouvoir lire et afficher les données.

C'est là qu'intervient JSON.parse() : elle prend une chaîne JSON en entrée et retourne un objet JavaScript prêt à l'emploi. Sur cette page, vous allez voir comment elle fonctionne, pourquoi elle a remplacé l'ancienne méthode eval(), et comment accéder aux données de l'objet obtenu.

Rappel : une chaîne JSON ressemble à quoi ?

Avant de parser, il faut avoir une chaîne. En pratique elle vient d'un serveur, mais pour les exemples on peut la déclarer directement en JavaScript :

var txt = '{ "employées" : [' +
  '{ "prenom":"Jennifer" , "nom":"Dubois" },' +
  '{ "prenom":"Amal" , "nom":"Sami" },' +
  '{ "prenom":"Pierre" , "nom":"Jolie" } ]}';

C'est du texte — pas encore un objet. On ne peut pas écrire txt.employées[0].prenom directement, JavaScript ne saurait pas quoi faire. Il faut d'abord parser cette chaîne.

JSON.parse() : la méthode standard

JSON.parse() est intégrée nativement dans tous les navigateurs modernes depuis de nombreuses années. Elle analyse le texte JSON, vérifie qu'il est valide, et retourne l'objet JavaScript correspondant.

var obj = JSON.parse(txt);

Une fois cette ligne exécutée, obj est un vrai objet JavaScript. On peut accéder à ses propriétés normalement : obj.employées[0].prenom retourne "Jennifer".

Exemple complet : afficher des données JSON dans une page

On parse la chaîne JSON, puis on utilise les propriétés de l'objet obtenu pour remplir des éléments HTML :

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Convertir JSON en objet JavaScript</title>
</head>
<body>
<h2>Créer un objet à partir d'une chaîne JSON</h2>
<p>
  Prénom : <span id="pnom"></span><br>
  Nom : <span id="nom"></span>
</p>
<script>
// La chaîne JSON (en pratique, elle vient d'un serveur)
var txt = '{"employées":[' +
  '{"prenom":"Jennifer","nom":"Dubois"},' +
  '{"prenom":"Amal","nom":"Sami"},' +
  '{"prenom":"Pierre","nom":"Jolie"}]}';

// On convertit la chaîne en objet JavaScript
var obj = JSON.parse(txt);

// On accède au deuxième employé (index 1)
document.getElementById("pnom").innerHTML = obj.employées[1].prenom;
document.getElementById("nom").innerHTML = obj.employées[1].nom;
</script>
</body>
</html>

Exemple : parcourir tous les employés avec une boucle

Quand le tableau contient plusieurs entrées, une boucle for permet de les afficher toutes sans les lister une par une :

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Boucle sur un objet JSON</title>
</head>
<body>
<h2>Liste des employés</h2>
<div id="resultat"></div>
<script>
var txt = '{"employées":[' +
  '{"prenom":"Jennifer","nom":"Dubois"},' +
  '{"prenom":"Amal","nom":"Sami"},' +
  '{"prenom":"Pierre","nom":"Jolie"}]}';

var obj = JSON.parse(txt);
var html = "";

// On parcourt le tableau d'employés
for (var i = 0; i < obj.employées.length; i++) {
  html += "Prénom : " + obj.employées[i].prenom;
  html += " — Nom : " + obj.employées[i].nom + "<br>";
}

document.getElementById("resultat").innerHTML = html;
</script>
</body>
</html>

Pourquoi ne plus utiliser eval() ?

Avant que JSON.parse() existe, on utilisait eval() pour transformer une chaîne en objet :

var obj = eval("(" + txt + ")");

Ça fonctionnait, mais c'est une mauvaise pratique — et c'est le cas depuis longtemps. eval() exécute n'importe quel JavaScript, pas seulement du JSON. Si la chaîne vient d'une source extérieure (un serveur tiers, une saisie utilisateur), du code malveillant peut s'y glisser et s'exécuter dans le contexte de votre page.

JSON.parse() n'accepte que du JSON valide. Elle refuse d'exécuter du code, ce qui élimine ce risque. En 2026, il n'y a aucune raison d'utiliser eval() pour parser du JSON.

Points à retenir

  • JSON.parse() est disponible nativement dans tous les navigateurs modernes — pas besoin de bibliothèque externe.
  • Si la chaîne JSON est invalide (virgule en trop, guillemets manquants...), JSON.parse() lève une exception SyntaxError. Enveloppez l'appel dans un bloc try/catch si la chaîne vient d'une source externe.
  • Pour faire l'opération inverse — transformer un objet JavaScript en chaîne JSON — utilisez JSON.stringify().

Par carabde | Mis à jour le 16 mai 2026