Discussion :

[pop_up]

Bonjour,

Je cherche à récupérer 2 json puis à faire la soustraction entre chacun d'eux sur beaucoup de propriétés.

Savez vous si c'est possible ?

Actuellement, je fait quelque chose de ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
var modules = [];
 
var app = angular.module('test', modules);
 
 
 
app.controller('DataCtrl', ['$scope', '$http', function ($scope, $http) { 
	$scope.checkJson1 = function() {
		$http.jsonp("http://url1?callback=JSON_CALLBACK").
		success(function(data) {
			$scope.p1 = data;
		}).
		error(function (data) {
			$scope.data = "Request failed";
		});
	};	
	$scope.checkJson2 = function() {
		$http.jsonp("http://url2?callback=JSON_CALLBACK").
		success(function(data) {
			$scope.p2 = data;
		}).
		error(function (data) {
			$scope.data = "Request failed";
		});
	};	
 
	// Ne fonctionne pas
	alert($scope.p1.value1);
	alert($scope.p2.value1);
}])

Les appels JSON fonctionnent bien et renvoient bien un JSON (que je peux afficher dans la vue si je veux)
le probleme c'est que je n'arrive pas accéder à mon objet stocké dans mon scope dans mon controlleur et en dehors de la méthode (afin de faire mes calculs). Je m'y prend mal je pense.

Pourriez vous m'éclairer ?

merci

[slim]

Bonjour,

Lorsque tu fais un alert sur ces variables au moment où tu le fais, elles ne sont pas encore résolues et c'est normal. Si tu déplace les deux alert à l'intérieur de tes appel $http, là elle seront alimentées.
Si tu mets des points d'arrêt dans ton controleur et que tu vois l'ordre d'exécution de chacune de tes instructions en debug, tu comprendrais pourquoi

[pop_up]

Merci Slim.

Oui, j'ai vi que dans mes appels, j'ai bien les variables.

Mon probleme c'est que j'ai deux appels http différents et que je souhaite faire des opération (et les mettres à jour à chaque fois qu'un de ces appels changent.

En gros, je pensais mettre différentes variable dans ma vue ({{soustraction1}}, {{soustraction2}}, {{soustraction3}} ...) et mettre à jour ces calculs à chaque changement.

Mon probleme c'est que vu que c'est deux appels distincts, j'ai jamais les deux valeurs en même temps si ?

Comment faudrait t'il faire pour etre propre (et pour ne pas essayer de faire une soustraction si l'appel http n'a pas fonctionné ?

merci

[slim]

et bien tu peux encapsuler tes deux appels dans un service. D'ailleurs, les contrôleurs ne servent qu'au bind. Tu ne devrais pas avoir de logique "métier" dedans.
Crée un service avec une méthode qui fait les deux appels http et les calculs du coup.

[pop_up]

J'ai essayé de faire un service mais je vois mal comment faire et surtout quoi faire dans mon service et comment interagir entre le controleur et le service.

Au lieu de faire les deux appels $http.jsonp, je ferais un appel du style monService.getData() ?

Vu que $http.json fonctionne en asynchrone, que doit retourner ma méthode getData ? Dois-je continuer à gérer le .then dans mon controleur ?

Tu l'auras compris, je suis un peu pommé et trés débutant en angular.

Merci pour ton aide

[slim]

J'ai essayé de faire un service mais je vois mal comment faire et surtout quoi faire dans mon service et comment interagir entre le controleur et le service.

Dans ton service, tu ne mets que les deux appels serveur et tes calculs. Ensuite, tu l'injecte dans le controleur et tu appelle ta methode pour enfin, lier le résultat à des variables.
regarde du côté du chainage de promesses en AngularJS ($q.all).

Au lieu de faire les deux appels $http.jsonp, je ferais un appel du style monService.getData() ?
Vu que $http.json fonctionne en asynchrone, que doit retourner ma méthode getData ? Dois-je continuer à gérer le .then dans mon controleur ?

Exactement. Mais il faudra faire un "then" lors de l'appel de la méthode du service. Car le service renverra une promesse ;-)

[pop_up]

J'avance ... mais j'y suis pas encore tout à fait.

Dans ma page, j'essaye d'afficher la variable {{calcul}}

J'ai fait un service pour récuérer mes données et si les deux appels sont ok, j'essaye d'affecter une valeur à ma variable $scope.calcul
... mais ça ne m'affiche rien.

Voici ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
var modules = ['services'];
 
var app = angular.module('test', modules);
 
 
 
app.controller('DataCtrl', ['$scope', 'TestService', function ($scope, TestService) { 
        $scope.checkJson = function() { 
        TestService.getData($scope.url1).then(
            function (result) {
                $scope.data  = result;
 
 
                TestService.getData($scope.url2).then(
                    function (result) {
                        $scope.data2  = result;
                        // je test d'affecter une valeur à ma variable
                        $scope.calcul = result.var1;
 
 
                    },
                    function (error) {
                        // handle errors here
                        console.log(error);
                    }
                );
 
 
            },
            function (error) {
                // handle errors here
                console.log(error);
            }
        );
 
 
}])

Mes appels jsonp et la récupération des données fonctionne bien dans mon service.

Pourquoi je ne vois rien dans ma page en essayant d'afficher {{calcul}} ? j'ai fait un truc de travers ?

Merci

[slim]

J'ai fait un service pour récuérer mes données et si les deux appels sont ok

Comment as-tu codé tes services ?
est-ce que le service renvoie une promesse ?

j'essaye d'affecter une valeur à ma variable $scope.calcul... mais ça ne m'affiche rien.

Quel est le contenu de la variable result dans ton contrôleur ?

Mes appels jsonp et la récupération des données fonctionne bien dans mon service.

Comment le sais-tu ?

[pop_up]

Tout fonctionne bien en fait c'est ok.

Comment le sais-tu ?

Dans chrome, je regardais l'onglet network où je voyais bien apparaître mes appels avec les réponses correctes

Si ça peut en aider certains, voici à quoi ressemble mon service :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var services = angular.module('services', []);
 
services.factory('TestService', function($http, $q) {
  var myTest = {};
 
    myTest.getData = function(url) {
 
        var deferred = $q.defer();
 
        $http.jsonp(url+"?callback=JSON_CALLBACK").
            success(function(data, status) {
                deferred.resolve(data);
 
            }).
            error(function(data, status) {
                deferred.reject("Failed to get data");
            });
 
        return deferred.promise; 
    };
 
 
  return myTest;
});

et le controleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
var modules = ['services'];
 
var app = angular.module('test', modules);
 
 
 
app.controller('DataCtrl', ['$scope', 'TestService', function ($scope, TestService) { 
        $scope.checkJson = function() { 
        TestService.getData($scope.url1).then(
            function (result) {
                $scope.data  = result;
 
 
                TestService.getData($scope.url2).then(
                    function (result2) {
                        $scope.data2  = result2;
 
                        $scope.var1 = result.var1;
                        $scope.var2 = result2.var1;
                        $scope.calcul = result2.var1- result.var1;
 
 
                    },
                    function (error) {
                        // handle errors here
                        console.log(error);
                    }
                );
 
 
            },
            function (error) {
                // handle errors here
                console.log(error);
            }
        );
 
 
}])

Merci pour ton aide Slim. Tes conseils m'ont été précieux ;-)

[slim]

De rien

Juste une petite remarque : Avec le chaînage de promesses, le code est plus clair et surtout plus propre...
un article intéressant : "Using and chaining promises in AngularJS"