- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Donc la dernière étape ici c'est de récupérer les données qui sont envoyées dans la vue donc lesdonnées du JSON response à l'intérieur de notre fichier html. Donc après le fetch ici on va
00:00:10 :récupérer ces données et les envoyer à notre paragraphe. Donc là ce que je vais faire c'esttout simplement rajouter des méthodes puisque là en fait on va avoir ce qu'on appelle despromises donc promise en anglais et on va pouvoir traiter ces données donc la réponse qui nous est
00:00:23 :renvoyée en fait par la vue avec la méthode den. Donc on va mettre un den ici et là grâce à labeauté de javascript c'est le gros avantage par rapport à Python on peut organiser tout ça un peumieux donc moi je vais le mettre à la ligne ici on n'est pas obligé de le coller à notre parenthèse
00:00:38 :puisque là vous allez voir qu'on a plusieurs den qui vont se mettre à la suite les uns des autreset donc c'est pratique de pouvoir les organiser comme ça avec javascript. Donc on a un premier
00:00:46 :den ici qui va récupérer la réponse et on va utiliser les fonctions fléchées là encore dejavascript qui nous permettent d'avoir un code qui nous permettent d'avoir un code assez épuré. Donc
00:00:55 :on va récupérer response ici là encore c'est juste un nom on pourrait mettre patrick bienentendu je vais l'appeler response puisque c'est la réponse en fait de notre vue que l'on varécupérer et on va récupérer donc cette réponse sous le format json donc pour ça on va utiliser
00:01:08 :la méthode json qui nous permet donc de récupérer cette réponse au format json puisque là on envoit un json response donc vous voyez c'est assez logique on a json response ici et on récupèreles données sous forme de json. On va ensuite avoir un autre den donc je vais à la ligne et je
00:01:24 :fais un autre den qui va dans ce cas ci nous récupérer le résultat et on va pouvoir ensuitetraiter ce résultat pour afficher donc le résultat dans notre paragraphe ici. Donc on va faire une
00:01:34 :variable qu'on va appeler result et là encore avec notre fonction fléchée ça va être assez épuréet on va avoir donc une fonction ici dans laquelle on va pouvoir traiter le résultat et l'afficher.
00:01:43 :Donc j'ouvre les accolades, je ferme ma parenthèse et à l'intérieur de ces accolades on va afficherle résultat dans notre paragraphe. Donc je vais ouvrir comme ça pour faire un peu de place et
00:01:53 :ici on va déjà récupérer notre paragraphe résultat donc on va faire tout simplement une variable qu'onva appeler result paragraphe et on va utiliser l'encore query selector pour aller récupérerdonc cet élément avec le id de result. Donc j'ouvre les parenthèses, je mets une chaîne de caractère,
00:02:10 :le hashtag result, le point virgule et donc tout ça ça me permet juste de récupérer ce paragrapheici. Et à l'intérieur de ce paragraphe et bien on va tout simplement modifier le inner html donc
00:02:21 :puisqu'on va en fait rajouter des informations à l'intérieur de cette balise donc entre le p quiouvre ici et le p qui ferme on va rajouter ici le calcul de l'opération. Donc ici je vais faire
00:02:31 :result paragraphe inner html et on va dire que c'est égal à notre résultat. Donc résultat ici,le result c'est un dictionnaire, c'est notre dictionnaire en fait json, notre objet ici quel'on a renvoyé. Donc ce dictionnaire on va pouvoir accéder à ces données avec les crochets donc là
00:02:47 :ça ressemble vraiment beaucoup à ce qu'on ferait avec Python. Donc on va mettre les crochets et onva récupérer ce qu'on envoie ici. Donc là on a un dictionnaire avec result donc je vais prendre
00:02:55 :cette clé et on va récupérer donc la valeur associée à cette clé. Donc là vous voyez queça fait beaucoup de result alors il faut bien comprendre ce qui se passe ici. On a notre
00:03:04 :variable result ici que l'on récupère qui est notre résultat donc le dictionnaire qui est renvoyépar la vue. Donc là je pourrais mettre Patrick ici et ça voudrait dire qu'il faut que je mette
00:03:13 :Patrick ici. Ok donc on a Patrick, on a Patrick notre dictionnaire et le result ici c'est toutsimplement la clé donc le nom de la clé qu'on a spécifié dans notre vue. Donc là si je mettais
00:03:23 :Pascal et bien dans mon fichier html il faudrait que j'aille récupérer la clé Pascal ici. Et leresult ici et bien c'est tout simplement le ID que l'on a mis à cet endroit. Donc là si je
00:03:33 :mettais par exemple opération et bien ce serait opération qu'il faudrait mettre ici. Donc là jevais juste changer les noms pour que ce soit bien clair qu'est ce qui correspond à quoi. Donc on a
00:03:40 :Patrick ici que l'on récupère donc c'est ce qui est envoyé par la vue. Donc c'est notre dictionnaireau complet ici qui est renvoyé par le jsonResponse. A l'intérieur de ce dictionnaire on a notre clé
00:03:50 :Pascal avec la valeur que l'on souhaite récupérer. Donc cette clé Pascal ici on y accède avec lesguillemets à l'intérieur des crochets sur notre dictionnaire Patrick. Donc le dictionnaire qu'on
00:03:59 :a récupéré ici qui est renvoyé par le jsonResponse. Et ensuite il ne nous reste plus qu'à mettre toutça donc à l'intérieur de notre paragraphe ici avec le ID de opération. Donc on va vérifier que
00:04:09 :tout ça fonctionne correctement je vais actualiser ma page. On va rentrer des données donc on vamettre 5 et 6. On appuie sur calculer et là ça fonctionne on a bien 11 qui est affiché. Donc je
00:04:18 :vais essayer avec d'autres nombres pour voir si ça fonctionne bien et on a bien donc le résultat del'opération qui s'affiche à chaque fois. Et si vous regardez on a bien donc la page qui n'est pas
00:04:26 :rafraîchie donc ça veut dire qu'on a bien une requête qui est effectuée de façon asynchronesans avoir besoin de rafraîchir la page juste en cliquant ici sur le bouton calculer. Donc vous
00:04:36 :voyez que ça fait quand même pas mal de choses mais ce n'est pas quand même très compliqué. Ona juste ici la récupération des données de notre formulaire, la création de notre requête, ensuiteon envoie les données à notre vue, on les récupère et on les traite avec ce then ici pour les
00:04:51 :réafficher à l'intérieur de notre paragraphe. Et dans la vue et bien ici on a tout simplement uneopération qui est effectuée à partir des données qui sont récupérées dans notre dictionnairerequest.post. Et avec le jsonResponse ici on peut communiquer donc avec notre fichier html en
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.