Plusieurs appels $http.jsonp

**pop_up** · 15/06/2015, 23h51

Bonsoir,

Je tatonne beaucoup avec Angular, et je n'arrive pas à faire plusieurs appel avec $http.jsonp.

1. En fonction du remplissage d'un premier champ, j'appelle une url (avec la valeur de ce champ dans cette url), et je construit un champ <select> => OK
2. j'aimerai, en fonction de ce que je selectionne, appeler une seconde url et récupérer la réponse.

Mon probleme c'est que je n'arrive pas à récupérer ma seconde réponse. Il me met à la fin "....angular.callbacks._1 "

J'ai codé un truc de ce style dans mon 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
 
app.controller('MonControleur', ['$scope', '$http', function ($scope, $http) {
 
  $scope.checkSelectedChamp1 = function(element) {
        $scope.$apply(function($scope) {
 
				$http.jsonp("http://url1/"+element.value+"/?callback=JSON_CALLBACK").
				success(function(data) {
					$scope.data = data;
					// ici ça marche
				}).
				error(function (data) {
				$scope.data = "Request failed";
 
				});
 
        });
    };
  $scope.checkSelectedChamp2= function(element) {
		$scope.$apply(function($scope) {
		$http.jsonp("http://url2/"+element.value+"/?callback=JSON_CALLBACK").
			success(function(data) {
				$scope.data = data;
				// ici ça marche pas
			}).
			error(function (data) {
			$scope.data = "Request failed";
 
			});
        });
    };
    }])

Quelqu'un pourrait t'il m'expliquer et me dire la bonne méthode à appliquer ?

merci

**slim** · 16/06/2015, 13h49

Bonjour,

Je ne comprends pas pourquoi tu appelle le $apply...
pourquoi tu ne ferais pas ceci (avec un ng-change dans le template) :

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
app.controller('MonControleur', ['$scope', '$http', function ($scope, $http) { 
    $scope.checkSelectedChamp1 = function(element) {      
        $http.jsonp("http://url1/"+element.value+"/?callback=JSON_CALLBACK").
        success(function(data) {
            $scope.data = data;
            // ici ça marche
        }).
        error(function (data) {
            $scope.data = "Request failed";
        });        
    };
    $scope.checkSelectedChamp2= function(element) {
        $http.jsonp("http://url2/"+element.value+"/?callback=JSON_CALLBACK").
            success(function(data) {
                $scope.data = data;
                // ici ça marche pas
            }).
            error(function (data) {
                $scope.data = "Request failed"; 
            });        
    };
}])

Comment est ton html ?

**pop_up** · 16/06/2015, 16h06

Merci pour ta réponse.

Effectivement, le $apply n'est pas utile.

J'ai corrigé et voila ce que ça donne.
HTML

Code html :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title>test</title>        
    </head>
    <body ng-app="app">
		<div ng-controller="DataCtrl">	
 
		  <input ng-model='champ1' onchange="angular.element(this).scope().checkSelectedChamp1(this)"/> 
 
			<pre ng-model="data">
			 {{data}}
			</pre>
			<select ng-model='champ2Selected' onchange="angular.element(this).scope().checkSelectedChamp2(this)">
				<option ng-repeat="item in liste" value="{{item.id}}">{{item.name}}</option>
			</select>
 
 
		</div>
 
		<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

javascript :

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
var modules = [];
var app = angular.module('app', modules);
 
 
app.controller('DataCtrl', ['$scope', '$http', function ($scope, $http) { 
    $scope.checkSelectedChamp1 = function(element) {      
        $http.jsonp("http://url1/"+element.value+"/?callback=JSON_CALLBACK").
        success(function(data) {
            $scope.data = data;
			$scope.name = data.name;
			$scope.liste = data.liste;
            // ici ça marche
        }).
        error(function (data) {
            $scope.data = "Request failed";
        });        
    };
    $scope.checkSelectedChamp2= function(element) {
        $http.jsonp("http://url2/"+element.value+"/?callback=JSON_CALLBACK").
            success(function(data) {
                $scope.data = data;
                // ici ça marche pas
            }).
            error(function (data) {
                $scope.data = "Request failed"; 
            });        
    };
}])

**slim** · 16/06/2015, 16h36

Et quel est le résultat ?

et dans le template (HTML), pour appeler une fonction définie dans le controleur, tu mets simplement le nom de la fonction.

Remplace ceci :

Code :

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

onchange="angular.element(this).scope().checkSelectedChamp2(this)"

par cela :

Code :

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

ng-change="checkSelectedChamp2(champ2)"

en initialisant peut-être champ2 dans le contrôleur.

Idem pour l'autre fonction.

PS: Ne pas oublier de remplacer onchange par ng-change

**pop_up** · 16/06/2015, 17h54

Si je remplace le onchange par ce que tu me donnes, j'ai l'erreur suivante :

Uncaught SyntaxError: Unexpected token <

Y a t'il un moyen simple de voir ou est ce qu'il considère que la structure est mauvaise ?

Pour le problème du jsonp, lors de l'appel de la seconde url (qui est bonne) j'ai ceci dans la console de chrome :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
GET http://url2/4512154/?callback=angular.callbacks._1 
f @ angular.js:10472
b @ angular.js:10343
m @ angular.js:10232
$get.f @ angular.js:9944
(anonymous function) @ angular.js:14454
$get.m.$eval @ angular.js:15719
$get.m.$digest @ angular.js:15530
$get.m.$apply @ angular.js:15824
(anonymous function) @ angular.js:27900
c @ angular.js:3247
ListPicker._handleMouseUp @ about:blank:632

Qu'est ce que cela signifie ?

**pop_up** · 16/06/2015, 18h00

Je viens de voir ce qui n'allait pas :

la seconde url est bonne mais j'avais écrit ceci :

Code :

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

$http.jsonp("http://url2/"+element.value+"/?callback=JSON_CALLBACK").

alors qu'en modifiant en ceci :

Code :

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

$http.jsonp("http://url2/"+element.value+"?callback=JSON_CALLBACK").

ça passe.

Si il y a une explication, je vux bien comprendre.

Sinon, j'essai toujours de corriger mon onchange par un ng-change ...

merci

**slim** · 18/06/2015, 17h40

Envoyé par pop_up

Y a t'il un moyen simple de voir ou est ce qu'il considère que la structure est mauvaise ?

Si tu reçois un "unexpected token <", cela veut dire que tu demande au serveur un fichier js (par exemple), et qu'il te renvoie du html.
Cela peut arriver par exemple quand il y a un "handler de fichier" au niveau du serveur et qu'il te renvoie une page 404 (404.html) quand il ne trouve pas le fichier demandé.
Le premier caractère qu'il essaie donc de parser est "<" d'où le message.
Il faudrait voir les xhr (F12) effectués.

Pour ce qui concerne les paramètres dans tes url, c'est normal. Il ne faut pas mettre de "/" avant "?".

**pop_up** · 21/06/2015, 15h42

Merci pour vos réponses.

L'appel à l'url se faisait bien et j'avais bien une réponse avec un statut 200, mais je n'avais pas de contenu.

En tout cas tout marche bien, et j'ai réussi à remplacer mes fonctions javascript par du ng-change.

Plusieurs appels $http.jsonp

AngularJS

Discussions similaires

Partager

Partager