AngularJS duplicates http requests

Question

I'm doing some interfaces with AngularJS and watching the Chrome Console I detect that each http request to an API it makes for duplicate. Is there any way to avoid this?

This is my simplified code

$http.jsonp('http://APIURL.com/api/category/menu?callback=JSON_CALLBACK').success(function(data){
    $scope.categories=data.categories;
});

Full code:

var kbControllers = angular.module('kbControllers', []);
kbControllers.controller("KBHomeController", function ($scope, $http, $rootScope) {
    $rootScope.header = 'Title of page';
    $http.jsonp('apicall.com/api/category/menu?callback=JSON_CALLBACK').success(function (data) {
        $scope.categories = data.categories;
    });
});

and this is my console enter image description here

any thought?

I suspect that the logic that calls the API is what's actually firing twice. Can you share that code? — Fourth
– Fourth, Commented Dec 12, 2013 at 18:27
var kbControllers = angular.module('kbControllers', []); kbControllers.controller("KBHomeController", function ($scope, $http, $rootScope) { $rootScope.header = 'Title of page'; $http.jsonp('apicall.com/api/category/menu?callback=JSON_CALLBACK') .success(function(data){ $scope.categories=data.categories; }); }) — juan
– juan, Commented Dec 12, 2013 at 19:03
Everytime I encounter this it's because my listeners/watchers are firing a request multiple times. Reorganize logic and should be good. Trace through your code with console.log. — Michael J. Calkins
– Michael J. Calkins, Commented Dec 12, 2013 at 19:09
@MichaelCalkins can you translate for not advanced angularjs programme? — juan
– juan, Commented Dec 12, 2013 at 19:11
@juan Not knowing what your code looks like I'd try things link adding a console.log() message to all of the places where your $http functions are being called. It's been my experience that when I find the spot that calls a $http function more than once I just need to modify that spot's condition that triggers the $http function. The code you posted is perfect, the flow you take that calls that code is what usually is the issue. — Michael J. Calkins
– Michael J. Calkins, Commented Dec 12, 2013 at 19:22

Aouidane Med Amine · Accepted Answer · 2015-04-21 09:23:34Z

3

i have faced this problem, and you can resolve it like this :

check if you have declared ng-controller twice , you need to declare it just one time
check if you have declared data-ng-click , if so , you need to replace it with ng-click

that's it

answered Apr 21, 2015 at 9:23

Aouidane Med Amine

1,72118 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nifled Over a year ago

I was almost going crazy 'cause everything on one section was making double and repeated requests, thank you for advising me to check if I had declared the controller twice.

juan · Accepted Answer · 2013-12-12 19:35:53Z

-1

This is app.js

var app = angular.module('app', [
   'ngRoute','kbControllers', 'kbFilters', 'kbDirectives', 'angularytics', 'kbServices'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider
    .when('/',
        {
            templateUrl: '/assets/angular/kb/partials/home.html',
            controller: 'KBHomeController'
        }
    ).when('/category/:category',
        {
            templateUrl: '/assets/angular/kb/partials/category.html',
            controller: 'KBCategoryController'
        }
    )
    .otherwise({redirectTo:"/"});
  }
])

And in controllers.js

var kbControllers = angular.module('kbControllers', []);

kbControllers.controller("KBHomeController", function ($scope, $http, $rootScope, Menu) {
$rootScope.header = 'Atención al cliente - Movistar Argentina';

    $http.jsonp('http://APIURL.com/api/category/menu?callback=JSON_CALLBACK').success(function(data){
    $scope.categories=data.categories;
    });
})

and my view /partials/home.html

[...]
<li ng-repeat="category in categories"><a href="#/category/{{category.path}}"><i class="{{category.icon}}"></i><span>{{category.name}}</span></a></li>
[...]

answered Dec 12, 2013 at 19:35

juan

3654 silver badges10 bronze badges

1 Comment

juan Over a year ago

seems to be something with jsonp, because changing to $http.get works fine.

Collectives™ on Stack Overflow

AngularJS duplicates http requests

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related