JavaScript : JSON, AJAX et les requêtes asynchrones

Utiliser un format JSON dans JavaScript

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
JavaScript dispose d'une méthode et d'un objet qui vous permettront de transformer une chaîne de caractères en objet, et vice-versa.
05:50

Transcription

J'ai envie de voir comment ça va se comporter sous JavaScript, et comment en fait, je vais pouvoir travailler avec cette donnée qui est du JSON ? Alors, vous vous souvenez, je vous l'ai dit, le JSON, c'est une chaîne de caractères, ni plus ni moins. On va d'abord se mettre ici voilà, dans notre Chrome, et on va se placer sur la console. Il faut savoir que la console de Chrome vous permet de faire du JavaScript très facilement. Par exemple, je pourrais lui demander « 5 + 5 » en JavaScript, il me donnerait le résultat. Vous pouvez utiliser « clear » aussi quand vous avez besoin de vider, voilà, ça nous permettrait de vider, vous pouvez aussi utiliser celui-ci pour vider la console. Alors maintenant, on va donc mettre ce qu'on a écrit ensemble précédemment dans une variable. On va appeler cette variable du coup, « response », comme si c'était une réponse de serveur. Et puis, on va coller ce qu'on avait, mais alors attention, on va pas le coller comme ça, non, parce que si vous le collez comme ça, il va pas le comprendre, il va falloir le coller comme une chaîne de caractères, donc on va mettre ici des guillemets ouvrantes et fermantes, on va coller la chaîne de caractères à l'intérieur, et puis on va fermer avec un « ; » derrière, et on va faire « Entrée ». Il va vous dire attention, il y a des problèmes, je n'arrive pas à comprendre. Faites super attention à ça, parce que à l'intérieur ici de votre variable, vous voyez que vous avez en fait, déjà des ouvertures et des fermetures avec des guillemets doubles. Donc, faites des guillemets simples, collez ça à l'intérieur, et faites « Entrée » à la fin. Il va encore vous dire qu'il a des problèmes de compréhension, en fait, il ne comprend pas votre format. Donc, faites attention, il va simplement falloir ici échapper absolument tout, et pour échapper absolument tout, vous allez être un petit peu embêté parce que, ce qu'on a là actuellement, il n'arrive pas du tout à le comprendre. Alors, je vais vous montrer comment on va faire, ça va être assez simple, il va falloir que vous enregistriez ce format de donnée-là, et pour ça, on va le passer dans une méthode qui s'appelle « JSON.stringify() », et on va lui donner toute notre chaîne de caractères, donc ici on va faire ça, et on va faire « Entrée ». Et là, vous allez remarquez qu'effectivement, il va venir récupérer toute la chaîne, et puis il va en fait vous fabriquer un nouvel objet qui va être une chaîne de caractères complète que vous allez pouvoir récupérer. Donc ça, vous le copiez. Ça, c'est intéressant, c'est ce qu'on va utiliser. Vous videz la console, et vous allez remettre dans la réponse « var response = » la chaîne qu'on vous a donné tout à l'heure. Là, il vous dit encore, ben tiens, il y a des caractères que je comprends pas. Alors vous allez vous dire c'est quand même très embêtant tout ça, parce qu'on n'arrive pas à le sauvegarder, et c'est vrai, on n'arrivera pas à le sauvegarder directement, et on risque d'être embêté avec cette chaîne de caractères, parce que tout simplement, il y a des parenthèses et il y a pas mal de choses qu'il arrive pas à comprendre dedans, mais si vous mettez ici, vous voyez, des guillemets simples, et des guillemets simples à la fin maintenant sur cette chaîne de caractères, ça va fonctionner. On va faire « response = », et là, regardez, c'est bon, on a « undefined », et dans « response », on va bien récupérer la chaîne. Donc, je récapitule, faites très attention quand vous voulez le tester en console. Vous allez d'abord devoir le passer dans un premier temps dans un « JSON.stringify() », vous récupérez la sortie, et ensuite vous modifierez cette sortie, puisque en fait, il va vous mettre ici des guillemets ouvrantes et fermantes qui seront des doubles-guillemets, et nous, il nous faut des simples. Il ne peut pas le comprendre dès le départ, vous êtes obligé d'abord de le passer dans « stringify », et ensuite vous récupérez la chaîne et mettez des guillemets simples. À partir de là, on peut souffler, on a maintenant ici une « response » qui est du texte pur, et comme vous pouvez le voir ici, quand on lui demande ce qu'il y a dans la « response », pour le moment c'est du texte. Alors, comment on va faire pour l'utiliser, ce texte, parce que c'est exactement ce qu'on va recevoir quand on va faire un appel asynchrone vers un webserver. On va récupérer du texte pur, et ce texte pur, il va falloir le transformer en objet. Pour transformer en objet, vous avez vu la fonction « stringify » sur JSON, eh bien, sachez qu'il existe également sur JSON, la fonction « parse » qui nous permet de « parser » un JSON et de transformer ça en un objet. Et ici, on va simplement lui mettre notre variable « response », et on va le laisser faire le travail, et comme vous pouvez le voir juste en dessous, on va récupérer ici une collection d'objets avec le premier objet qui correspondra à la structure que l'on a définit tout à l'heure. Là, vous avez un objet qui est un objet JavaScript avec lequel on va pouvoir travailler. Tout simplement, si j'ai envie de récupérer le premier, je vais simplement créer ici un « firstItem » qui va être égal du coup, à « JSONparse(response) » ici, et mon premier « Item » de la collection, c'est-à-dire en fait la clé « [0] ». Là, je vais récupérer le « firstItem », et en faisant ici « first », alors attention, pas comme moi, mais « firstItem. », vous voyez que je peux accéder à toutes les propriétés ici, de mon objet, puisque maintenant, c'est un objet JavaScript. Il va falloir faire ça malheureusement à chaque fois qu'on va récupérer une réponse. Si on le fait nous même à la main, il va falloir « parser » la réponse qui simplement va être du texte, et puis, pouvoir travailler avec directement au format objet. Ce qui est intéressant c'est que d'un objet on peut passer à de la chaîne de caractères, et de la chaîne de caractères on peut passer à un objet. Faites très attention, l'objet que j'utilise c'est JSON, et c'est tout en majuscule, ne vous amusez pas à essayer de taper « Json.parse », ça ne marche pas, vous êtes obligés d'utiliser « JSON », avec des majuscules partout pour pouvoir accéder à « parse » et à « stringify ». C'est comme ça qu'on l'utilise en JavaScript, alors je vais simplement vous montrer comment on va re-transformer notre objet qui s'appelle « firstItem », eh bien, qu'on va le re-transformer en texte, simplement en le repassant à l'intérieur, et ça le re-transforme en texte automatiquement. Donc, ces deux méthodes-là, ces deux moulinettes vont vous permettre soit de récupérer un objet depuis du JSON, soit de transformer un objet en JSON, et vous pouvez comme ça, travailler avec le format JSON très facilement avec JavaScript.

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 !