Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

JavaScript : JSON, AJAX et les requêtes asynchrones

Écrire un fichier de données en JSON

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez le principe d'écriture d'un fichier en JSON. Puis, décrivez une structure de données avec des clés et des valeurs.
05:46

Transcription

Trêve de discussion, maintenant, on va écrire. On va écrire quoi ? On va écrire un fichier JSON. On va en fait « émuler » le fait qu'on va chercher ce fichier en appelant une API. Nous, évidemment, on ne va pas se coder une API complète mais on va faire comme si. C'est à dire que on va poser un fichier JSON à la racine de notre projet et puis avec une libraririe Ajax, donc avec par exemple JQuery on ira récupérer le contenu de ce fichier et on ira le travailler. Dans un premier temps ici, comment on va faire ? Comment on va travailler cette donnée ? On va partir d'un utilisateur, donc utilisateur qu'est ce qu'il va avoir ? Il va avoir un prénom, il va avoir un nom, il va avoir une date de naissance, il va avoir un âge, d'accord. Il va avoir quoi d'autre ? Il peut avoir par exemple un sexe. Il peut aussi, pourquoi pas, avoir une adresse. Ça, c'est jouable aussi. Il peut avoir un code postal, un« zip code ». Il peut avoir une ville. Ça, bien sûr, là, il va falloir qu'on mette en place eh bien, une structure de données. Pour faire simple, généralement, ce sera une collection d'utilisateurs donc si c'est une collection on commencera comme ça, c'est une collection. Si c'est un seul objet que vous récupérez vous pouvez le définir comme ça. d'accord ? Donc, collection ou objet, on a le choix, soit on va ouvrir des crochets dans ce cas-là, ce sera une collection d'objets. Soit on va ouvrir juste un objet comme ça et ce sera un objet unique qu'on récupère. On va partir du principe pour le moment que c'est un seul objet. Alors, si i c'est un seul objet ici, on va devoir définir maintenant ses différentes propriétés. Je vais mettre celui-là sur le côté pour qu'on puisse garder ici les différentes propriétés et puis on va le définir. Les structures de données sont toujours définies en anglais, et donc on va devoir traduire à chaque fois, les différentes informations. Alors, les clés qu'on a ici, c'est ce qui va nous amener de la donnée, c'est les clés de la donnée. Donc par exemple, le « Last Name», ici, pour le nom. Mais, on pourrait aussi avoir au-dessus le « First Name ». Donc, le « First Name » va se mettre au dessus voilà ici et on va mettre « First Name ». Vous remarquez que mon éditeur, à chaque fois que je reviens à la ligne eh bien, il va tabuler. Pourquoi il va tabuler tout seul ? Parce que dans un format JSON, c'est comme ça qu'on doit faire. Il va aussi, et ça c'est bien pour vous vous criez dessus si jamais c'est pas bon, si vous avez oublié des choses. Il faut savoir que voilà comment ça se passe on a une clé qui doit être entourée par des guillemets doubles c'est comme ça que ça se passe en JSON et la valeur c'est la même chose. Et après une virgule. Et la valeur c'est la même chose, à chaque fois. Donc ici par exemple, « First Name », on pourrait avoir Julien « Last Name » : Moulin Je vais tout vous donner, c'est incroyable ! Ensuite, on pourrait avoir ici la date de naissance. Le « Birth Date », alors on peut le séparer Et on peut faire un seul mot aussi, c'est valide. Et ici, on pourrait mettre la date de naissance. Allez, 08 06. Je ne vous donnerai pas la date vous la calculerez. Ensuite en-dessous, on va mettre par exemple l'âge. Alors, hop, je vais me rajeunir un petit peu. On va dire que j'ai 30 ans D'accord, moi, je suis resté bloquer à 30. Je ne sais pas pour vous qui regardez, moi je suis resté bloqué à 30. Ici, 30 ans, OK. Le sexe, bon ici, on peut juste mettre sexe comme ça. Et puis on peut mettre ici M par exemple, pour le sexe. Et puis, ensuite, regardez ce qu'on a, on a l'adresse A. Alors, ça, c'est un cas un peu particulier parce que généralement les adresses on va faire un sous-objet. Un sous-objet qui va se comporter de cette manière Ça va simplement être imbriqué à l'intérieur de la propriété. et ici on pourrait avoir la « City », comme ça, par exemple, la « City », voilà. Et puis, en dessous, on pourrait avoir le code postal. Donc, ça pourrait être « Zip Code ». Le « Zip Code » comme ça, hop , voilà. Et là, vous avez créé un objet en JSON, en tout cas, vous avez défini un premier objet en JSON. D'accord, c'est comme ça que ça va fonctionner donc il n'y a pas grand chose à savoir sur le format JSON, mais par contre ici, vous avez un chiffre. Alors, vous pensez que vous pouvez le mettre comme ça c'est pas mal hein, mais généralement, on vous renverra toujours ce genre de données. On vous enverra tout avec des guillemets devant et des guillemets derrière. Essayez de le respecter parce que c'est mieux en fait, en réalité d'« émuler » un format JSON que vous pourriez recevoir. Alors, ensuite ici, si c'est une collection d'utilisateurs, on peut faire comme ça. Voyez, ça va être de cette manière qu'on va l'écrire donc avec un utilisateur, par exemple à l'intérieur, ça veut dire qu'on est obligé de tout re-tabuler. On est obligé de tout re-tabuler parce que ça, c'est l'objet qui ouvre et ça c'est l'objet qui ferme à la fin. Ça, c'est l'objet adresse et ensuite, c'est toutes les propriétés qui se trouvent dedans. Je vous conseille de toujours tout tabuler pour la simple et bonne raison que quand vous avez un gros fichier JSON vous pouvez refermer ici les différents groupes. Et ça, c'est très important pour pouvoir travailler facilement, d'accord. Donc là, on vient de décrire un format JSON complet, on va enregistrer cette donnée il n'y a aucun autre caractère qui doit intervenir ou qui doit venir à l'intérieur d'un fichier JSON que ce qu'on vient de faire. Pourquoi ? Parce que si vous mettez des caractères à l'intérieur, il ne sera plus valide. De même, on est pas en JavaScript donc on ne va pas s'amuser à fermer avec un point virgule ce n'est pas comme ça qu'on fait là, c'est vraiment un format qui permet d'écrire de la donnée même si ça se rapproche beaucoup d'un objet JS c'est pas un objet JavaScript. C'est vraiment le format JSON, ça n'a rien à voir, enlevez-vous de la tête si vous croyez que c'est du JavaScript, ça n'en est pas, c'est une notation d'objet, effectivement, qui se rapproche du JavaScript mais c'est vraiment un format bien particulier, vous voyez qu'ici en plus on va avoir à chaque fois eh bien, des guillemets absolument partout sur les clés et sur la valeur ce qui est pas le cas en JavaScript, donc ici voilà, enregistrer ce fichier on l'a maintenant, on va pouvoir travailler avec et on va pouvoir voir comment dans JavaScript ça va se comporter cette histoire. Parce que ça c'est bien de l'avoir comme ça, mais ça va pas du tout être un objet tout de suite en JavaScript. Il y a quand même des différences.

JavaScript : JSON, AJAX et les requêtes asynchrones

Découvrez les requêtes asynchrones en Javascript avec le format JSON et la norme AJAX. Assimilez les techniques du développement d’applications web en single-page.

2h03 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !