JSON
Présentation
JSON est un format de données, basé sur du
texte.
JSON est un standard ouvert basé sur du texte
léger conçu pour l'échange de données
lisible.
JSON est l'acronyme de JavaScript Object
Notation car c'est un dérivé de la
représentation littérale d'un objet en
JavaScript.
Il est basé sur un sous-ensemble du langage
de programmation JavaScript.
JSON est un format texte complètement
indépendant de tout langage.
Points forts
JSON est facile à lire et à écrire.
Il est un format d'échange basé sur le texte
léger.
JSON est indépendant du langage
Les types de données
JSON supporte plusieurs types de données :
Object : est composé de paires clé/valeur, chacune
étant séparé par une virgule, entourées par des
accolades.
Numérique : nombre entier ou flottant
Chaîne de caractères : ensemble de caractères
Unicode (sauf une double quote et un antislash)
entouré par des doubles guillemets
Booléen : true ou false
Tableau : un ensemble ordonné de valeurs entouré
par des crochets. Les types des valeurs d'un
tableau peuvent être différents.
La valeur null
Structure
JSON se base sur deux structures:
objet (object) est composé de paires nom/valeur
tableau (array) est une liste de valeurs
L’objet
Un objet est un ensemble de couples
nom/valeur non ordonnés.
Un objet commence par { (accolade gauche)
et se termine par } (accolade droite).
Chaque nom est suivi de : (deux-points) et les
couples nom/valeur sont séparés
par , (virgule).
Exemple 1 :
var employe1 = { nom:"Mohamed", age: 34,
salaire: 18000 };
Exemple 2 :
On peut intégrer ce code dans un fichier ex1.html
<html>
<head> <title> exemple JSON </title> </head>
<body>
<script>
var employe1 = {nom:"Mohamed",age:34,salaire:18000};
document.write ("<h3> Nom= "+employe1.nom+"</ h3>");
document.write ("<h4> Age= "+employe1.age+"</ h4>");
document.write ("<h4> Salaire= "+employe1.salaire+"</
h4>");
</script>
</body>
</html>
Exemple 3 :
<html> <head> <title> exemple JSON </title> </head>
<body>
<script>
var employe1 = { nom : "Mohamed", age : 34, salaire :
18000 };
var employe2 ={ nom : "Salah", age : 31, salaire : 12000 };
var employe3 ={ nom : "Hèdi", age : 34, salaire : 16000 };
var objet1 = { emp1:employe1, emp2:employe2,
emp3:employe3};
document.write("<h3>Nom=
"+objet1.emp1.nom+"</h3>");
</script> </body> </html>
Le tableau
Un tableau est une collection de valeurs
ordonnées.
Un tableau commence par [ (crochet gauche)
et se termine par ] (crochet droit).
Les valeurs sont séparées par , (virgule).
Exemple 1 :
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 }
]
Exemple 2 :
On peut intégrer ce code dans un fichier ex2.html
<html> <head> <title> exemple JSON </title> </head>
<body>
<script>
var objet1 = {
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 }
]
}
document.write ("<h3> Nom=" + objet1.finance[0].nom + "</
h3>");
document.write ("<h4> Age=" + objet1.finance[0].age + "</
h4>");
document.write ("<h4> Salaire=" + objet1.finance[0].salaire +
"</ h4>");
Exemple 3 :
<html> <head> <title> exemple JSON </title> </head>
<body>
<script>
var objet1 = {
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 }
]
}
for(i=0;i<objet1.finance.length;i++){
document.write ("<h3> Nom=" + objet1.finance[i].nom + "</
h3>");
document.write ("<h4> Age=" + objet1.finance[i].age + "</
h4>");
document.write ("<h4> Salaire=" + objet1.finance[i].salaire +
"</ h4>");}
Exemple 4 :
<body> <script>
var objet1 = {
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 }
],
informatique : [
{ nom : "Hèdi", age : 34, salaire : 16000 },
{ nom : "Alia", age : 30, salaire : 18000 },
{ nom : "Hèla", age : 32, salaire : 12000 }
]
}
document.write ("<h2>Finance</h2>");
for(i=0;i<objet1.finance.length;i++){
document.write ("<h3> Nom=" + objet1.finance[i].nom + "</ h3>");
document.write ("<h4> Age=" + objet1.finance[i].age + "</ h4>");
document.write ("<h4> Salaire=" + objet1.finance[i].salaire + "</ h4>");}
document.write ("<h2>Informatique</h2>");
for(i=0;i<objet1.informatique.length;i++){
document.write ("<h3> Nom=" + objet1.informatique[i].nom + "</ h3>");
document.write ("<h4> Age=" + objet1.informatique[i].age + "</ h4>");
document.write ("<h4> Salaire=" + objet1.informatique[i].salaire + "</ h4>");}
JSON.parse()
La méthode JSON.parse() permet de créer une chaîne de
caractères JavaScript contenant une syntaxe JSON.
Exemple
<body>
<script>
var text ='{"employes":['+'{"nom" : "Mohamed", "age" : 34,
"salaire" : 18000 },'+ '{ "nom" : "Salah", "age" : 31, "salaire" :
12000 }]}';
//les doubles quotes sont indispensables pour les noms.
var obj = JSON.parse(text);
document.write(obj.employes[1].nom + " " +
obj.employes[1].salaire)
</script>
</body>
JSON.stringify()
La méthode JSON. stringify() permet de convertir
une valeur JavaScript en chaîne JSON
Exemple
<body>
<script>
var employes= new Array();
employes[0]="Mohamed";
employes[1]="Salah";
var obj = JSON.stringify(employes);
document.write(obj) ;
</script>
</body>
