Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : JSON, AJAX et les requêtes asynchrones

Utiliser une réponse XMLHttpRequest

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à une méthode toute simple, mettez en place une itération et procédez au nettoyage de votre réponse. Ensuite, vous pourrez la transformer en objet.
06:09

Transcription

L'objet qu'on a là et qu'on reçoit de la réponse, c'est bien de le recevoir comme cela mais ce serait plus intéressant si on pouvait travailler avec un vrai objet Javascript. Que reçoit-on ? On reçoit de la réponse, du texte, vous vous souvenez comment on fait pour transformer du texte on objet ? Il suffira de faire « JSON.parse» comme ça et d'aller récupérer cette réponse qui est du texte pour la transformer en objet. Pour vérifier que ça fonctionne bien, on va faire un « console/log » à cet endroit-là. On va fermer à cet endroit-là et on va vérifier. On voit que ce texte est transformé en objet, directement par Javascript et on a la possibilité de le travailler et on va être en capacité d'aller plus loin. Ça veut dire quoi ? Ca voudrait dire se créer une fonction qu'on appellerait « parseJson » et qui transformerait notre objet JSON et qui pourrait valider certaines informations puisqu'ici, quand je vais récupérer les infos, malheureusement, mon « true » n'est pas un « true », mon « age » n'est pas un chiffre, voyez que j'ai des problèmes, j'aimerais bien ne pas en avoir. Donc là, je vais utiliser un « parser », je vais en créer un et puis on va transformer cette réponse, ici. On va se mettre un objet « object » on va passer par JSON à cet endroit-là pour faire un appel à « parseJson » et pour nous retourner l'objet qui aura été nettoyé par notre fonction. On va mettre ça dans une variable et on va l'appeler « goodObject », qui aura été proprement nettoyé et on va faire un « console.log » de notre « goodObject ». Je vous conseille de faire des copier-coller pour ne pas vous tromper. Vous pouvez aussi utiliser la complétion de votre éditeur. Qu'est-ce que ça va faire ? Ça va faire une boucle « for ». Le mieux est de prendre un « forin » que vous avez ici. Vous faites « Entrée » et regardez ça vous complète tout. Là, on est bien car on va pouvoir travailler dessus. Si l'objet a bien la propriété « clé », « objet », etc. on fait simplement un « for » sur notre objet et on va pouvoir travailler cela. Le « var element », voyez que ça va être « object key », on n'a pas besoin de ça, on va plutôt travailler sur un « switch key » qui va nous permettre de récupérer la valeur. L'élément qu'on a là, c'est plutôt la valeur et ici on va faire un « switch » « switch » comme ça, et on va faire un « switch true » et on va valider des cas pratiques. Le premier cas pratique serait la valeur « value » « === » pourquoi ? Pourquoi pas « === » à « true », comme ça. Donc si la valeur est « === » à « true » ou que la valeur est « === » à « false » on va lui dire que, dans ce cas-là, la valeur, donc « object key » va être égal à « value === true ». Pourquoi fait-on ça comme ça ? Parce que ça va nous retourner un « booléen », on va avoir ici un « booléen » qui va être retourné. Je vous conseille aussi de mettre en place un « break » qui vous permettra de continuer à l'intérieur des cas différents que vous pourriez implémenter. Là, on peut en implémenter autant qu'on veut. Déjà, on peut regarder celui-ci. On voit qu'on a un « undefined » à cet endroit-là, pourquoi ? Parce que « parseJSon » ne retourne pas notre objet propre à la fin. Pensez bien aussi, ici, à faire un « return » de votre objet pour que ça puisse, ici, entrer dans votre variable et revenir à la fin. Maintenant, si j'ouvre ça, je vois que mon « active » ici est toujours à « true », le plus intéressant ça va être de faire un « console.log » des différentes valeurs « console.log value » comme cela. Et on va voir ce qu'on a à l'intérieur. On voit que pour les valeurs vous récupérez un objet. Pourquoi ? On a oublié quelque chose d'important, c'est que c'était une collection, on veut notre « goodObject » mais on veut le premier « goodObject » le « goodObject 0 ». N'oubliez pas ça, comme tout à l'heure ce qu'on avait fait dans la console sinon ça ne marchera pas. Regardez qu'à la fin de notre objet, le « active » est passé à « true », c'est parfait, génial. Ce qui est bien avec un « console.log » c'est que ça vous permet de voir les différentes propriétés, c'est vraiment très intéressant. On va le faire pour le 30. Vous voyez le 30, ici, il faudrait qu'on puisse vérifier que c'est un objet, ou du texte, uniquement du texte. Comment faire ? On va faire un « case » comme ça et on va utiliser une expression régulière, on va lui demander s'il n'y a que des chiffres à l'intérieur. On va tester, on va faire un test de la valeur et s'il n'y a que des chiffres à l'intérieur, on va lui demander de transformer cette valeur en « Int » et on va donc simplement faire un « type parseInt » de la valeur pour transformer cette valeur directement en chiffre. On va faire un « break » derrière et on va recharger notre page et on va récupérer cette valeur ici, ça va devenir 30. Voyez cette expression régulière-là ça permet de vérifier, de tester que, dans une valeur, on n'a que des chiffres. Là, vous pourriez en implémenter autant que vous voulez surtout qu'il y a une petite complexité c'est de pouvoir itérer également sur l'objet qui se trouve à l'intérieur d' « address » pour faire la même chose, par exemple sur le code postal. Ce sont des cas pratiques, je vous montre comment en implémenter un, vous voyez que ce n'est pas si facile que ça parce qu'on a beaucoup d'informations à traiter, il faut vérifier si on a un autre objet, alors il faut le repasser et traiter les valeurs qui se trouvent à l'intérieur. Ça peut devenir très rapidement compliqué de mettre en place des règles surtout que, pour un « booléen » on pourrait aussi recevoir 1 ou 0, ou « yes » ou « no », donc voyez que ça peut être très long à faire et ça peut devenir casse-tête. En tout cas, ici, vous avez une première méthode de « parse » fonctionnelle, vous voyez comment on peut mettre ça en place, comment on peut utiliser une réponse « XMLHttpRequest » et la transformer en un objet. C'est déjà la première étape vraiment intéressante. Maintenant, vous allez voir qu'avec les « librairies » type jQuery, on n'a plus besoin de faire ça puisque tout est fait pour nous, directement.

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 !