Conditionnel if...else js : Définition et utilisation de la condition if avec des exemples.
Les caractères littéraux des objets JSON
Les littéraux des objets JSON sont entourés d'accolades {}.
Les littéraux d'objets JSON contiennent des paires clé/valeur.
Les clés et les valeurs sont séparées par deux points.
Les clés doivent être des chaînes de caractères et les valeurs doivent être un type de données JSON valide :
chaîne de caractères
- nombre
- objet
- tableau
- booléen
- null
Chaque paire clé/valeur est séparée par une virgule.
C'est une erreur courante d'appeler un objet JSON littéral "un objet JSON".
JSON ne peut pas être un objet. JSON est un format de chaîne de caractères.
Les données ne sont JSON que lorsqu'elles sont dans un format de chaîne bien definit.
Lorsqu'elles sont converties en variable JavaScript, alors elles deviennent des objets JavaScript.
Création d'objets simples
Les objets JSON peuvent être créés avec JavaScript.
Voyons les différentes façons de créer des objets JSON à l'aide de JavaScript.
- Création d'un objet vide
var JSONObj = {} ;
- Création d'un nouvel objet
var JSONObj = new Object() ;
- Création d'un objet avec l'attribut bookname dont la valeur est une chaîne de caractères et
l'attribut prix dont la valeur est numérique.
L'accès à l'attribut se fait en utilisant l'opérateur point '.'.
- var JSONObj = { "bookname " : "Guide PHP", "prix":100 } ;
Voici un exemple qui montre la création d'un objet en javascript en utilisant JSON, metez dans le code un fichier html sous le nom de json_object.html .
Exemple : Copier le code
<html>
<head>
<title>Créer Object JSON avec JavaScript</title>
<script language = "javascript" >
var JSONObj = { "name" : "oujood.com", "year" : 2009 };
document.write("<h1>Exemple JSON avec JavaScript </h1>");
document.write("<br>");
document.write("<h3>Website Nom = "+JSONObj.name+"</h3>");
document.write("<h3>Année = "+JSONObj.year+"</h3>");
</script>
</head>
<body>
</body>
</html>
Création d'objets de type tableau
L'exemple suivant montre la création d'un objet de type tableau en javascript en utilisant JSON. Enregistrez le code sous le nom de json_array_objet.html.
Exemple : Copier le code
<html>
<head>
<title>Creation of array object in javascript using JSON</title>
<script language = "javascript" >
document.writeln("<h2>JSON array object</h2>");
var books = { "Pascal" : [
{ "Name" : "Pascal en toute simplicité", "price" : 679 },
{ "Name" : "Guide de Pascal", "price" : 299 }],
"Scala" : [
{ "Name" : "Le logiciel Scala pour les impatients", "price" : 999 },
{ "Name" : "Scala en Depth", "price" : 1199 }]
}
var i = 0
document.writeln("<table border = '2'><tr>");
for(i = 0;i<books.Pascal.length;i++) {
document.writeln("<td>");
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td><b>Nom</b></td><td width = 50>" + books.Pascal[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Prix</b></td><td width = 50>" + books.Pascal[i].price +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
for(i = 0;i<books.Scala.length;i++) {
document.writeln("<td>");
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td><b>Nom</b></td><td width = 50>" + books.Scala[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Prix</b></td><td width = 50>" + books.Scala[i].price+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>
Boucle sur un objet
Vous pouvez parcourir les propriétés d'un objet à l'aide d'une boucle for-in. Le code dans l'exemple renvoie les clés de l'objet json.
Exemple : Copier le code
<html>
<body>
<h2>Propriétés des objets de bouclage</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":45, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Alors que cet exemple renvoie les valeurs de l'objet json
<html>
<body>
<h2>Bouclage sur les valeurs des objets JavaScript</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Par carabde 2 novembre 2021