JSON.parse()


Table des matières

    Afficher la table des matières


Une utilisation courante de JSON consiste à échanger des données vers/depuis un serveur Web.

Lors de la réception de données d'un serveur Web, les données sont toujours une chaîne.

Analysez les données avec JSON.parse() et les données deviennent un objet JavaScript.


Exemple - Analyse JSON

Imaginez que nous recevions ce texte d'un serveur Web :

'{"name":"John", "age":30, "city":"New York"}'

Utilisez la fonction JavaScript JSON.parse() pour convertir du texte en objet JavaScript :

const obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');
  

Assurez-vous que le texte est au format JSON, sinon vous obtiendrez une erreur de syntaxe.

Utilisez l'objet JavaScript dans votre page :

Exemple

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

Tableau en JSON

Lors de l'utilisation de JSON.parse() sur un JSON dérivé d'un tableau, la méthode renvoie un tableau JavaScript, au lieu d'un objet JavaScript.

Exemple

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>


Des exceptions

Analyse des dates

Les objets date ne sont pas autorisés dans JSON.

Si vous devez inclure une date, écrivez-la sous forme de chaîne.

Vous pourrez le reconvertir en objet date ultérieurement :

Exemple

Convertir une chaîne en date :

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Ou bien, vous pouvez utiliser le deuxième paramètre de la fonction JSON.parse(), appelé reviver.

Le paramètre reviver est une fonction qui vérifie chaque propriété, avant de renvoyer la valeur.

Exemple

Convertissez une chaîne en date, en utilisant la fonction reviver :

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Fonctions d'analyse

Les fonctions ne sont pas autorisées dans JSON.

Si vous devez inclure une fonction, écrivez-la sous forme de chaîne.

Vous pourrez le reconvertir en fonction plus tard :

Exemple

Convertir une chaîne en fonction :

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

Vous devez éviter d'utiliser des fonctions en JSON, les fonctions perdront leur portée, et vous devrez utiliser eval() pour les reconvertir en fonctions.