CODEWITHSUNDEEP
angularjs
Vishnujeet Singh
Vishnujeet Singh

Reputation: 13

jsonp callback error in angular

getting callback error in this below code as (Uncaught ReferenceError: updateData is not defined) .could you help me please , i am new on angularjs .

var student = angular.module("studentModule", []);

student.controller("StudentCtrl", ["$scope", "$http", function($scope, $http) {
    $http({
        method: 'jsonp',
        url: 'http://abelski.com/courses/ajax/data.json?callback=updateData'

    })
        .success(function (data, status, headers, config) {
            $scope.students = data;

        })

        .error(function (data, status, headers, config) {

        });
}]);

code links codepen.io/anon/pen/bNOXgB

Upvotes: 0

Views: 778

Answers (2)

Erik Honn
Erik Honn

Reputation: 7576

The good way

First of all, I would suggest not using jsonp at all. It is easier to mess up and can create more security issues. Instead just return json in a good old get. There are very few valid cases for actually using jsonp.

{
    "name":"dave",
    "id":123123,
    "average":94
}

The JSONP way

If you need to use JSONP then there are a few issues with your code.

The main one is that your API does not respect the callback parameter. If a client specifies a callback name the server needs to use that name for the wrapper, it cannot return its own hard-coded name. This is the current standard for JSONP and Angular relies on you following it.

If you hard-code the callback name in the backend then you are forced to create a global function for the callback in your frontend, which is what you have done in your jQuery example. You don't want to do this, it is very bad practice. Angular is about containment and you want your callback to be run by $http.success(), not in some global method that you then have to force back into the Angular flow.

In order for that to work you must switch the callback name in the url to be JSON_CALLBACK as milanlempera has already noted. Your API also must respect the given callback name and respond with the json wrapped with this function name. Note that JSON_CALLBACK is a placeholder that Angular replaces (to keep track of multiple requests) so you cannot just hardcode JSON_CALLBACK in your backend, that won't work either. You really do have to make your server conform to the standards for JSONP by responding by the given callback name, otherwise you cannot use Angulars jsonp properly.

If you cannot change the API then your ownly real option is to make a global function called updateData, which I really recommend against.

Bonus round

Just writing this as you are new on Angular. As a general rule of thumb, don't do http request in your controllers. For any http-request you want to make, create a service to handle those API calls. Then you can inject that service in the same way as you inject $http or $scope into the controller. It allows for much easier code-reuse since you can now inject the same API into any controller that needs it without having to repeat any code, and it is also generally easier to test.

Upvotes: 1

milanlempera
milanlempera

Reputation: 2263

The name of the callback should be the string JSON_CALLBACK (see https://docs.angularjs.org/api/ng/service/$http#jsonp)

right url is therefore http://abelski.com/courses/ajax/data.json?callback=JSON_CALLBACK

JSON_CALLBACK is just a placeholder, which is replaced with unique angular callback function for each jsonp request

Upvotes: 3

Related Questions