JSON toujours deux fois

44
JSON toujours deux fois

description

Un introduction simple au format de données JSON, JSONP avec une approche très vague de comment on peut faire dans la vie quand on n'a pas facile, mais qu'il faut absolument que ça aille. Présentation faire à Namur le 11/03/2014 dans le cadre du Workshop DataViz-05 consacré à la visualisation de données, ce qui fait que justement on l'appelle dataviz, car c'est une sorte de patronyme qui parle aux initiés. Merci à la vie

Transcript of JSON toujours deux fois

Page 1: JSON toujours deux fois

JSONtoujours deux fois

Page 2: JSON toujours deux fois

Comment on dit ?

Djîçonne

J’y sonne

Djéy-sonne

Jay SON

Jason

Page 3: JSON toujours deux fois

Comment on dit ?

Djîçonne

J’y sonne

Djéy-sonne

Jay SON

Jason -> remember G.I. Joe

Page 4: JSON toujours deux fois

Comment on dit ?

Djîçonne

J’y sonne

Djéy-sonne

Jay SON

Jason -> remember G.I. Joe-> remember DJ(ay)

Page 5: JSON toujours deux fois

Bon

Page 6: JSON toujours deux fois

C’est quoi, sinon ?

Page 7: JSON toujours deux fois

le JSON, c’est quoi ?

JavaScript Objet Notation

Page 8: JSON toujours deux fois

C’est quoi ?

un format de données

basé sur la syntaxe du JavaScript

assez lisible pour l’humain

assez facile à écrire à la main (ou au pied)

Page 9: JSON toujours deux fois

Un fichier JSON

à quoi ça ressemble ?

Page 10: JSON toujours deux fois

Un fichier JSON

c’est beau

Page 11: JSON toujours deux fois

Un fichier JSON

et à l’intérieur ?

Page 12: JSON toujours deux fois

Un fichier JSON

et à l’intérieur ?

C’est beau aussi !

Page 13: JSON toujours deux fois

Mais d’abord, un peu d’histoire...

Page 14: JSON toujours deux fois

{}Ceci n’est pas un objet

Page 15: JSON toujours deux fois

{}C’est la représentation d’un objet

en JavaScript

Page 16: JSON toujours deux fois

{}C’est la représentation d’un objet

en JavaScript

et aussi la base de la notation JSON

Page 17: JSON toujours deux fois

Rappelons-nous...La syntaxe du JavaScript pour les données de base

Page 18: JSON toujours deux fois

Rappelons-nous...La syntaxe du JavaScript

pour créer un objet

Page 19: JSON toujours deux fois

Un objet, des propriétés.

Un objet, c’est un peu comme un étagedans une structure de donnée.

On peut y stocker des choses,qui deviennent ses propriétés.

Page 20: JSON toujours deux fois

Exemple concret

Page 21: JSON toujours deux fois
Page 22: JSON toujours deux fois
Page 23: JSON toujours deux fois

et ainsi de suite...

Page 24: JSON toujours deux fois
Page 25: JSON toujours deux fois
Page 26: JSON toujours deux fois

En imbriquant des structures, on arrive à créer un arbre de données

qui peut devenir complexe, mais reste toujours logique.

Page 27: JSON toujours deux fois

OK

Page 28: JSON toujours deux fois

OKet pour l’utiliser ?

Page 29: JSON toujours deux fois

facile !pour l’utiliser ?

Page 30: JSON toujours deux fois
Page 31: JSON toujours deux fois

JSON vs JSONP

Un fichier JSON “propre” :

Page 32: JSON toujours deux fois

JSON vs JSONP

Un fichier JSON “propre” :

Si je l’ajoute tel quel à ma page HTML,ça ne va pas aller...

Page 33: JSON toujours deux fois

JSON vs JSONPParce que :

- sécurité Cross-Domaine- syntax error

Page 34: JSON toujours deux fois

JSON vs JSONP

Donc :il faut un moyen de rendre le JSON utilisable

par les scripts de la page.

Parce que :

- sécurité Cross-Domaine- syntax error

Page 35: JSON toujours deux fois

JSONP = JSON with Padding

Page 36: JSON toujours deux fois

JSONP = JSON with Padding

Le padding, ce n’est pas le pudding

Page 37: JSON toujours deux fois

JSONP = JSON with Padding

Le padding, c’est un truc que le serveur rajoute autour des données

pour qu’on puisse les toucher.

Page 38: JSON toujours deux fois

JSONP = JSON with Padding

Le padding, ça peut être :

Page 39: JSON toujours deux fois

Assignation

JSONP = JSON with Padding

Le padding, ça peut être :

Page 40: JSON toujours deux fois

Assignation Appel de fonction

JSONP = JSON with Padding

Le padding, ça peut être :

Page 41: JSON toujours deux fois

En pratique

JSON : à charger avec un XMLHttpRequest

JSONP : à intégrer avec une balise <script>

Page 42: JSON toujours deux fois

Tu veux une démo ?

Page 43: JSON toujours deux fois

Les données de l’école

schoolData.jsque je dois encore vous transmettre

Page 44: JSON toujours deux fois

Bon, ça suffit !amusez-vous, maintenant.