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.
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 :
<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>
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.
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>
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 :
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.
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>
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 :
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.