$http get method fails even with valid json from .Net WebApi in AngularJS

Question

I am getting a valid JSON request but only $http fail method is invoked. It shows OK 200 in firebug. Also the view is not getting updated. Newbie trying out AngularJS so something could be too wrong :)

 $http.jsonp("http://localhost:51377/api/Books/1").success(function(data, status, headers, config) {
        alert("Suc");
        $scope.people = data;
    }).error(function(data, status, headers, config) {
        $scope.people = data;
        alert("fail");
    });

This is the response in firebug:

{"ID":1,"BookName":"ASP.Net"}

Also fails for:

[{"ID":1,"BookName":"ASP.Net"}]

getting 404 in status code in $http call. I am using jsonp which should take care CORS? as I read from somewhere. My angular is in file:// protocol

Update-1: Tried with launching my angular in localhost from VS. Same results

Update-2: I added configuration changes to remove CORS in my backend .net webapi and now it works with the following code but still the original above code using jsonp fails

        $http({
        method: 'get',
        url: 'http://localhost:51377/api/Books/',
        responseType: "json"
    }).success(function (data, status, headers, config) {
        alert(data);
        console.log('Success: ' + data);
        $scope.people = data;
    }).error(function (data, status, headers, config) {
        console.log('Error: ' + data);
    });

Did you try adding ?callback=JSON_CALLBACK (see my answer below)? It's in the angular docs. Also, this JSFiddle shows that it is required: jsfiddle.net/saarmstrong/hYACX/8/light — markwatsonatx

markwatsonatx markwatsonatx · Accepted Answer · 2016-04-21T04:12:43

I believe you need to add a callback parameter to your request:

$http.jsonp("http://localhost:51377/api/Books/1?callback=JSON_CALLBACK")

More info here:

https://docs.angularjs.org/api/ng/service/%24http#jsonp

Also, see this JSFiddle (not mine):

http://jsfiddle.net/saarmstrong/hYACX/8/light/

When you remove the callback parameter it fails...

$http get method fails even with valid json from .Net WebApi in AngularJS

2 Answers