JavaScript Object Notation

(JSON)

M. BOUMEDIENE

Institut National des Télécommunications et des Technologies

de l’Information et de la Communication
e-mail: mboumediene[at]inttic.dz

xx 2020

1/18 Mohammed Boumediene JavaScript

 Plan

1 C’est quoi JSON ?

2 Types de données

3 Règles Syntaxiques

4 Manipuler JSON avec JavaScript

2/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

Plan

1 C’est quoi JSON ?

2 Types de données

3 Règles Syntaxiques

4 Manipuler JSON avec JavaScript

3/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

C’est quoi JSON ?

JSON = JavaScript Oject Notation

4/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

C’est quoi JSON ?

JSON = JavaScript Oject Notation

Format léger utilisé pour l’échange des données entre les serveurs et entre les
clients et le serveur

4/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

C’est quoi JSON ?

JSON = JavaScript Oject Notation

Format léger utilisé pour l’échange des données entre les serveurs et entre les
clients et le serveur
Ce format est basé sur la notation des objets JavaScript

4/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

C’est quoi JSON ?

JSON = JavaScript Oject Notation

Format léger utilisé pour l’échange des données entre les serveurs et entre les
clients et le serveur
Ce format est basé sur la notation des objets JavaScript
Facile à lire/écrire

4/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

C’est quoi JSON ?

JSON = JavaScript Oject Notation

Format léger utilisé pour l’échange des données entre les serveurs et entre les
clients et le serveur
Ce format est basé sur la notation des objets JavaScript
Facile à lire/écrire
Supporté par beaucoup de langages

4/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

Pourquoi l’utiliser ?

Échanger des données entre les applications web et les serveurs (autres langages)
⇒ site web, service des payements (JAVA), service d’inventaire (.NET)

5/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

Pourquoi l’utiliser ?

Échanger des données entre les applications web et les serveurs (autres langages)
⇒ site web, service des payements (JAVA), service d’inventaire (.NET)
Rendre asynchrone l’interaction entre client et serveur
⇒ mettre à jour une partie de la page web sans recharger la totalité de la page

5/18 Mohammed Boumediene JavaScript

 C’est quoi JSON ?

Pourquoi l’utiliser ?

Échanger des données entre les applications web et les serveurs (autres langages)
⇒ site web, service des payements (JAVA), service d’inventaire (.NET)
Rendre asynchrone l’interaction entre client et serveur
⇒ mettre à jour une partie de la page web sans recharger la totalité de la page
⇒ AJAX (ensemble de technologies) ⇒ vous verrez ça en 5ème année inchallah

5/18 Mohammed Boumediene JavaScript

 Types de données

Plan

1 C’est quoi JSON ?

2 Types de données

3 Règles Syntaxiques

4 Manipuler JSON avec JavaScript

6/18 Mohammed Boumediene JavaScript

 Types de données

Types de données

JSON supporte les types suivants :

Nombre : entier (5), réel (2.5)
Chaîne de caractères : "Algeria" (entre guillemet)
Booléen : true, false
Tableau : array ([1, 2 ,3], ["un", "deux"])
Objet : une collection de paires clé/valeur
({ "IdCountry": 1, "name": "Algeria" })
Valeur vide : Null

JSON ne supporte pas les types suivants :

les fonctions (function)
les dates (date)
variable non-définie (undefined)

7/18 Mohammed Boumediene JavaScript

 Règles Syntaxiques

Plan

1 C’est quoi JSON ?

2 Types de données

3 Règles Syntaxiques

4 Manipuler JSON avec JavaScript

8/18 Mohammed Boumediene JavaScript

 Règles Syntaxiques

Règles Syntaxiques

JSON est un format textuel

⇒ la structure des données se présente sous forme de chaîne de caractères
Les données sont définies par une collection de paires clés/valeur :
"name":"Ahmed"
⇒ clé = name et valeur = Ahmed
Les paires clé/valeur sont délimitées par { et }
Les paires sont séparées par une virgule ,

9/18 Mohammed Boumediene JavaScript

 Règles Syntaxiques

Exemple de JSON (collection de paires clé/valeur)

1 {
2 " name " : "Ahmed Ben A l i " ,
3 " a ge " : 3 5 ,
4 " adress " : {
5 " s t r e e t " : " 5 b o u l e v a r d de l a n a t i o n " ,
6 " c i t y " : " Oran "
7 },
8 " j o b " : " web d e v e l o p p e r " ,
9 " l a n g u a g e s " : [ "HTML5" , "CSS" , " JS " ]
0 }

10/18 Mohammed Boumediene JavaScript

 Règles Syntaxiques

Règles Syntaxiques (suite)

Une structure JSON peut-être aussi :
1 Une collection de paires clé/valeur ⇒ une liste non-ordonnée de clé/valeur
2 Un tableau ⇒ une liste ordonnée de valeurs délimitées par [. . . ]

1 [
2 "Ahmed Ben A l i " ,
3 " 35 " ,
4 [ " 5 b o u l e v a r d de l a n a t i o n " , " Oran " ] ,
5 " web d e v e l o p p e r " ,
6 [ "HTML5" , "CSS" , " JS " ]
7 ]
11/18 Mohammed Boumediene JavaScript
 Règles Syntaxiques

Valider son fichier JSON

Fichier JSON ⇒ extension ".json"

Valider le contenu de votre fichier JSON ⇒ utiliser un validateur JSON
⇒ jsonlint ⇐ clicker ici

12/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Plan

1 C’est quoi JSON ?

2 Types de données

3 Règles Syntaxiques

4 Manipuler JSON avec JavaScript

13/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Sérialisation (Serialize)
La sérialization consiste à transformer un objet JavaScript en une chaîne de
caractères (une structure) JSON

14/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Sérialisation (Serialize)
La sérialization consiste à transformer un objet JavaScript en une chaîne de
caractères (une structure) JSON ⇒ la fonction stringify de la classe JSON

1 <p id= " p1 "></p>

1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // v a r i a b l e c o n t e a n t un o b j e t J a v a S c r i p t
3 var student = {
4 name : "Ahmed Ben A l i " ,
5 c l a s s : " IGE42 "
6 };
7 // on p e u t a c c é d e r au d i f f é r e n t champ de l o b j e t
8 c o n s o l e . l o g ( s t u d e n t . name ) ;
9 // s é r i a l i s a t i o n
0 // c o n v e r t i r un o b j e t J a v a S c r i p t en s t r u c t u r e JSON
1 studentJSON = JSON . s t r i n g i f y ( s t u d e n t ) ;
2 // a j o u t e r l e c o n t e n u JSON au p a r a p g r a p h e
3 v a r p a r a g r a p h = document . g e t E l e m e n t B y I d ( " p1 " ) ;
4 p a r a g r a p h . innerHTML = studentJSON ;
5 </ s c r i p t >
14/18 Mohammed Boumediene JavaScript
 Manipuler JSON avec JavaScript

Sérialisation (Serialize)
La sérialization consiste à transformer un objet JavaScript en une chaîne de
caractères (une structure) JSON ⇒ la fonction stringify de la classe JSON
student est un objet JavaScript/studentJSON n’est pas un objet JavaScript

1 <p id= " p1 "></p>

1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // v a r i a b l e c o n t e a n t un o b j e t J a v a S c r i p t
3 var student = {
4 name : "Ahmed Ben A l i " ,
5 c l a s s : " IGE42 "
6 };
7 // on p e u t a c c é d e r au d i f f é r e n t champ de l o b j e t
8 c o n s o l e . l o g ( s t u d e n t . name ) ;
9 // s é r i a l i s a t i o n
0 // c o n v e r t i r un o b j e t J a v a S c r i p t en s t r u c t u r e JSON
1 studentJSON = JSON . s t r i n g i f y ( s t u d e n t ) ;
2 // a j o u t e r l e c o n t e n u JSON au p a r a p g r a p h e
3 v a r p a r a g r a p h = document . g e t E l e m e n t B y I d ( " p1 " ) ;
4 p a r a g r a p h . innerHTML = studentJSON ;
5 </ s c r i p t >
14/18 Mohammed Boumediene JavaScript
 Manipuler JSON avec JavaScript

Sérialisation (Serialize)
La sérialization consiste à transformer un objet JavaScript en une chaîne de
caractères (une structure) JSON ⇒ la fonction stringify de la classe JSON
student est un objet JavaScript/studentJSON n’est pas un objet JavaScript
Les objets JavaScript ne sont pas des chaîne de caractères JSON

1 <p id= " p1 "></p>

1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // v a r i a b l e c o n t e a n t un o b j e t J a v a S c r i p t
3 var student = {
4 name : "Ahmed Ben A l i " ,
5 c l a s s : " IGE42 "
6 };
7 // on p e u t a c c é d e r au d i f f é r e n t champ de l o b j e t
8 c o n s o l e . l o g ( s t u d e n t . name ) ;
9 // s é r i a l i s a t i o n
0 // c o n v e r t i r un o b j e t J a v a S c r i p t en s t r u c t u r e JSON
1 studentJSON = JSON . s t r i n g i f y ( s t u d e n t ) ;
2 // a j o u t e r l e c o n t e n u JSON au p a r a p g r a p h e
3 v a r p a r a g r a p h = document . g e t E l e m e n t B y I d ( " p1 " ) ;
4 p a r a g r a p h . innerHTML = studentJSON ;
5 </ s c r i p t >
14/18 Mohammed Boumediene JavaScript
 Manipuler JSON avec JavaScript

Désérialisation (Parse)

La désérialization consiste à transformer une chaîne de caractères (une structure)

JSON en un objet JavaScript

15/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Désérialisation (Parse)

La désérialization consiste à transformer une chaîne de caractères (une structure)

JSON en un objet JavaScript ⇒ la fonction parse de la classe JSON

1 <p id= " p1 "></p>

1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // v a r i a b l e c o n t e a n t une c h a i n e de c a r a c t è r e ( s t r u c t u r e ) JSON
3 v a r s t u d e n t = ' { " name " : "Ahmed Ben A l i " , " c l a s s " : " IGE42 " } ' ;
4 // c o n v e r t i r l a s t r u c t u r e JSON en un o b j e t J a v a S c r i p t
5 s t u d e n t O b j e c t = JSON . p a r s e ( s t u d e n t ) ;
6 // t e s t e r s u r l a c o n s o l e : c o n s o l e . l o g ( s t u d e n t O b j e c t )
7 // a j o u t e r l e c o n t e n u de l o b j e t au p a r a p g r a p h e
8 v a r p a r a g r a p h = document . g e t E l e m e n t B y I d ( ' p1 ' ) ;
9 p a r a g r a p h . innerHTML = s t u d e n t O b j e c t . name + ' , ' +
studentObject . cl as s ;
0 </ s c r i p t >

15/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Désérialisation (Parse)

La désérialization consiste à transformer une chaîne de caractères (une structure)

JSON en un objet JavaScript ⇒ la fonction parse de la classe JSON
student n’est pas un objet JavaScript/studentObject est un objet JavaScript

1 <p id= " p1 "></p>

1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // v a r i a b l e c o n t e a n t une c h a i n e de c a r a c t è r e ( s t r u c t u r e ) JSON
3 v a r s t u d e n t = ' { " name " : "Ahmed Ben A l i " , " c l a s s " : " IGE42 " } ' ;
4 // c o n v e r t i r l a s t r u c t u r e JSON en un o b j e t J a v a S c r i p t
5 s t u d e n t O b j e c t = JSON . p a r s e ( s t u d e n t ) ;
6 // t e s t e r s u r l a c o n s o l e : c o n s o l e . l o g ( s t u d e n t O b j e c t )
7 // a j o u t e r l e c o n t e n u de l o b j e t au p a r a p g r a p h e
8 v a r p a r a g r a p h = document . g e t E l e m e n t B y I d ( ' p1 ' ) ;
9 p a r a g r a p h . innerHTML = s t u d e n t O b j e c t . name + ' , ' +
studentObject . cl as s ;
0 </ s c r i p t >

15/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Désérialisation (Parse)

La désérialization consiste à transformer une chaîne de caractères (une structure)

JSON en un objet JavaScript ⇒ la fonction parse de la classe JSON
student n’est pas un objet JavaScript/studentObject est un objet JavaScript
Les structure JSON ne sont pas des objets JavaScript

1 <p id= " p1 "></p>

1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // v a r i a b l e c o n t e a n t une c h a i n e de c a r a c t è r e ( s t r u c t u r e ) JSON
3 v a r s t u d e n t = ' { " name " : "Ahmed Ben A l i " , " c l a s s " : " IGE42 " } ' ;
4 // c o n v e r t i r l a s t r u c t u r e JSON en un o b j e t J a v a S c r i p t
5 s t u d e n t O b j e c t = JSON . p a r s e ( s t u d e n t ) ;
6 // t e s t e r s u r l a c o n s o l e : c o n s o l e . l o g ( s t u d e n t O b j e c t )
7 // a j o u t e r l e c o n t e n u de l o b j e t au p a r a p g r a p h e
8 v a r p a r a g r a p h = document . g e t E l e m e n t B y I d ( ' p1 ' ) ;
9 p a r a g r a p h . innerHTML = s t u d e n t O b j e c t . name + ' , ' +
studentObject . cl as s ;
0 </ s c r i p t >

15/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Charger un fichier JSON et le désérialiser

Pour des raisons de sécurité, un code JS ne peut communiquer qu’avec le serveur
à partir duquel la page web a été chargée
Afin de tester l’exemple suivant il faut insataller un serveur web (easyphp ou xamp
par exemple)
Le fichier ".json" ansi que la page web seront enregistrés dans le répertoire web
(eds-www pour easyphp ou bien htdocs pour xamp)
La classe XMLHttpRequest permet de créer une requête afin de récupérer le fichier
".json"

16/18 Mohammed Boumediene JavaScript

 Manipuler JSON avec JavaScript

Charger un fichier JSON et le désérialiser ("json2.html")

1 <u l id= " l i s t 1 "></u l>
1 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // t é l é c h a r g e r l e f i c h i e r " Exemple2 . j s o n "
3 v a r x m l h t t p = new XMLHttpRequest ( ) ;
4 // c e t t e f o n c t i o n s e r a e x é c u t é e d é s que " Exemple2 . j s o n " s e r a
t é l é charg é
5 xmlhttp . onreadystatechange = function () {
6 i f ( t h i s . r e a d y S t a t e == 4 && t h i s . s t a t u s == 2 0 0 ) {
7 // c o n v e r t i r l a s t r u c t u r e JSON en un o b j e t J a v a S c r i p t
8 v a r myObj = JSON . p a r s e ( t h i s . r e s p o n s e T e x t ) ;
9 v a r s t u d e n t s L i s t = document . g e t E l e m e n t B y I d ( ' l i s t 1 ' ) ;
0 var output = ' ' ;
1 f o r ( l e t i =0; i < myObj . l e n g t h ; i ++){
2 o u t p u t += '< l i >' + myObj [ i ] . name + ' , ' + myObj [ i ] . a ge
+ ' </ l i >' ;
3 }
4 s t u d e n t s L i s t . innerHTML = o u t p u t ;
5 }
6 };
7 // c o n s t r u i r e l a r e q u ê t e g e t Exemple2 . j s o n
8 x m l h t t p . open ( "GET" , " Exemple2 . j s o n " , t r u e ) ;
9 // e n v o i de l a r e q u ê t e
0 xmlhttp . send ( ) ;
1 </ s c r i p t >
17/18 Mohammed Boumediene JavaScript
 Manipuler JSON avec JavaScript

Merci pour votre attention! Des Questions?

Les codes présentés dans ce cours sont disponibles sur moodle

18/18 Mohammed Boumediene JavaScript