Angular Chart.js $http get

Laurent Urrutia
Javascript

Bonjour,

Brève explication du problème, j'essaye de mettre en place un annuaire interne à ma boite. J'utilise Angular coté client et PHP coté serveur dans le but de me faire la main sur du développement web.

Je suis déjà pas mal avancé et là j'essaye pour enrichir un peu ma page d'accueil de remonter un graphique qui m'indiquerait mon nombre d'employés répartis par sites.

J'ai donc chargé mes dépendances 

<link href="plugin/angular-chart.js/angular-chart.css" rel="stylesheet"/>
<script src="plugin/Chart.js/Chart.min.js"></script>
<script src="plugin/angular-chart.js/angular-chart.min.js"></script>

J'ai créé une requête SQL coté serveur qui me remonte correctement mes informations. J'ai un script PHP qui se charge derrière de me formater ces infos en JSON. Pas de problème de ce côté.

J'ai créé un contrôler 

app.controller('PieCtrl', function ($scope, $http) {
  $scope.labels = [];
  $scope.data = [];
  $http.get('scripts/requete.php?action=CompteurUsers')
      .success (function(r) {
        $scope.labels = r.Agences;
        $scope.data = r.NBR;
    });
});

Dans lequel je récupère mon JSON. Puis j'affiche mes informations cotés clients. Mon App est charger dans la balise <html ng-app=’app’> et mon contrôler et chargé avec mon fichier route.js

<div class="col-lg-6" ng-repeat="label in labels">
<canvas id="pie" class="chart chart-pie" legend="true" data="data" labels="labels">
</canvas>
</div>

Dans la console de chrome je vois mes scopes data et labels en "undefined" sans erreur dans la console. J'ai testé plusieurs méthodes mais je n'arrive toujours pas à remonter mes données dans mon scopes. Pour informations j'ai suivie ce topic si mes données sont entrés manuellement dans mes scope data et labels
Ça marche correctement, mais évidemment je voudrais que cela soit dynamique

4 réponses

Maenhyr
Réponse acceptée

OK. C'est normal que ca ne fonctionne pas. r est un tableau d'objets. Il te faut faire un peu de travail, j'imagine que tu veux ca : 


$http.get('scripts/requete.php?action=CompteurUsers')
        .success (function(r) {
          var agences = ["Atlantique", "Gascogne Bigorre"];
          var nbrs = ["4", "9"];
          $scope.labels = agences;
          $scope.data = nbrs;
      });

Dans ce cas, il te faut iterer sur r pour recuperer les bonnes informations et construires les deux variables donnees dans mon exemple.

PS : tu utilises r.Agences mais dans la console, je vois ObjectAgences. Il y a un souci de ce cote la aussi.

Maenhyr

As tu fait un console.log sur ta variable r ? Que renvoie-t-elle ?

Laurent Urrutia
Auteur

Merci de ta réponse prbaron
J'ai placé le console.log(r) voila le retour dans la console

$http.get('scripts/requete.php?action=CompteurUsers')
        .success (function(r) {  
          console.log(r);
          $scope.labels = r.Agences;
          $scope.data = r.NBR;
      });
[Object, Object]0: 
ObjectAgences: "Atlantique"NBR: "4"__proto__: Object1: 
ObjectAgences: "Gascogne Bigorre"NBR: "9"__proto__: 
Objectlength: 2__proto__: Array[0]

Donc le (r) me remonte toutes mes valeurs. Si par contre je fait un console.log(r.Agences) j'ai un retour "undefined"

Laurent Urrutia
Auteur

Ok je te remercie pour ces explications. Je vais creuser de ce côté et je reviens vers vous dès que j'ai avancé

Edition :

Bonjour je viens de repasser sur le projet et je viens de trouver une solution en reprenant de façons calme l’itération.

Voila le controller comme indiquer je construis mes deux variables en itérant sur chaque ligne de chaque colonnes.

app.controller('PieCtrl', function ($scope) {
  $scope.labels = [];
  $scope.data = [];
    $scope.CompteurUsers.forEach(function(r) {
      $scope.labels.push(r.Agences)
      $scope.data.push(r.NBR)
    })
});

Et voila le $http.get dans le main controller classique du coup

  $http.get('scripts/requete.php?action=CompteurUsers')
        .success (function(CompteurUsers) {
          $scope.CompteurUsers = CompteurUsers;
     });

Merci Prbaron pour l'aide sortir un peut du projet m'auras fait du bien du coup ;)