0

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

2 Answers 2

3

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

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

6 Comments

thx for reply but still i getting the same error . could you help me to resolve this bug .i posted my code here codepen.io/anon/pen/bNOXgB
ok, second problem is API - api must reflect callback parameter. If url contain callback=abc response must be abc({ "name":"dave", "id":123123, "average":94 })
i try such way but it not working , could you make change in my codepen code .
problem is API - does not act as valid JSONP API see JSONP
no not problem with api , it working fine with jquery codepen.io/anon/pen/ogJKwr
|
1

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.

3 Comments

it JSONP response not json . i am getting issue with angular callback only , same api working fine on jquery callback .codepen.io/anon/pen/ogJKwr
I know, but there is no need for it in this use case :) Still, I will update my answer for jsonp if that is what you need. Also, don't call your file .json if it does not contain json, call it .js
Worth mentioning the $resource service for those http requests (assuming RESTful)? docs.angularjs.org/api/ngResource and docs.angularjs.org/api/ngResource/service/$resource

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.