AngularJs - get json data

Polaris
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
Réponse acceptée

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

$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
Auteur

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

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

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
Auteur

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

Maenhyr

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
Auteur

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 --"