AngularJs - get json data

Par Polaris, il y a 11 ans

Javascript

Bonjour à tous, je viens demander un peu d'aide sur Angular JS.
Je suis novice sur le sujet donc je suppose que mone erreur et un truc tous bête que je ne comprend pas :D

Je voudrais récupérer les données qui sont dans un fichiers Json pour initialiser un objet. Voila donc ce que je fais .

$http.get("monfichier.json").success(function(data, status, headers, config) { $scope.templateData = data; console.log($scope.templateData); }); console.log($scope.templateData);

Mon problème est que le $scope.templateData contient mes informations mais quans je sors de la function mon $scope.templateData est a null, je suppose que il y a une histoire de scope que je ne comprend pas.

ma variable a l'air différente dans ma function et en dehors. Merci pour votre futur aide :D Les documentations que j'ai trouvé faisaient exactement comme ça --"

8 réponses

Maenhyr, il y a 11 ans

$http.get() renvoie une promesse. Le code contenu dans ton success() sera réalisé quand le résultat de la requête sera appelé.
Ce que fait le code à l'heure actuelle :

  • envoie une requête GET pour récupérer le fichier JSON.
  • afficher le console.log($scope.templateData); hors $scope.templateData n'existe pas
  • lance la fonction de succès
  • set le contendu du JSON dans le scope
  • affiche le scope.

C'est donc normal si ton console.log qui est en dehors n'affiche pas la bonne valeur.

Polaris, il y a 11 ans

le $scope.templateData est init a null au début du controller. et dans le .success le console log affiche bien ma data json.
donc le $scope.templateData devrait bien être mis à jour non ? après la function il est toujours à null.
Je comprend pas forcément ce que tu veux m'expliquer en faite --"

Maenhyr, il y a 11 ans

Ton console.log hors de ta fonction est exécuté AVANT le code dans le success(). C'est donc normal qu'il t'affiche null.

Maenhyr, il y a 11 ans

Tu réalises du code asynchrone. Le programme ne se bloque pas lors de l'appel à la requête GET. Ce n'est donc pas parce que tu as écrit ton console.log() après ton appel qu'il sera exécuté après.

Maenhyr, il y a 11 ans

Voici l'ordre de traitement des commandes vu par ton navigateur.

$http.get("monfichier.json") // 1 .success(function(data, status, headers, config) { $scope.templateData = data; // 3 console.log($scope.templateData); // 4 }); console.log($scope.templateData); // 2
Polaris, il y a 11 ans

Ah ok j'ai compris :D donc la suite du code que je veux effectuer je la place dans le success ^^ Merci beaucoup

Maenhyr, il y a 11 ans

Si tu as besoin de templateData, oui en effet. Sinon tu peux mettre un watcher dessus. C'est l'équivalent du listener en jQuery.

Polaris, il y a 11 ans

Oui c'est ce que j'ai fais en faite :D Merci pour l'aide j'aurais pus rester bloqué longtemps pour un truck aussi bête que ça --"