Getting the response as "data":null,"status":-1 when calling web api from AngularJS

Question

I am trying to call Web API GET Method from Angular JS 1.6.0 and getting the following error:-

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://localhost:51972/api/video","headers":{"Accept":"application/json, text/plain, /"}},"statusText":""}

I am getting the proper JSON response when I call the same GET method from Fiddler 4 and returning JSON Text.

Please note that my WEB API and Angular JS code are in different directory.

As per Dez's comment I have modified WebApiConfig.cs to return JSON response from WebAPI

WebApiConfig.cs

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
            config.Formatters.Remove(config.Formatters.XmlFormatter);
        }
    }

VideoController.cs

public class VideoController : ApiController
{
        [Route("api/video")]
        public List<VideoViewModel> GetVideo()
        {
            List<VideoViewModel> video = new List<VideoViewModel>();
            video.Add(new VideoViewModel { Name = "Hello World", Desc = "Hello World Desc" });
            video.Add(new VideoViewModel { Name = "Hello World1", Desc = "Hello World Desc1" });
            return video;
        }
}

When I type 'http://localhost:51972/api/video' and hit then I get proper response(JSON) as below:-

 [{"Name":"Hello World","Desc":"Hello World Desc"},{"Name":"Hello World1","Desc":"Hello World Desc1"}]

Home.html

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="../Scripts/AngularControllers/AddVideoController.js"></script>
</head>
<body ng-app="modVid" ng-controller="ctrlVidAdd">
      <table class="table">
        <tr>
            <th>Name</th>
            <th>Desc</th>
       </tr> 
       <tr ng-repeat="a in selectedDisplay">
            <td>{{a.Name}}</td>
            <td>{{a.Desc}}</td>
        </tr>
    </table>
</body>

AddVideoController.js

var myApp = angular.module("modVid", []);
myApp.controller("ctrlVidAdd", function ($scope, $http) {
$http.get('http://localhost:51972/api/video').then(function (response) {
        alert("Hello");
        $scope.selectedDisplay = response.data;
    });
});

When I try to debug WEB API Get call from Angular JS then I can see that it is calling Web API Get method but nothing is returning from Web API. As you can see I put alert in the response at $http end which is also not getting executed as well.

Any help would be appreciated.

Your API response is an XML and you try to fetch it as JSON with Angular? It is confusing. — Dez
Hi Dez I have modified as per your comment . I have included the edited code. Still getting the same response in log. Any idea on this? — simple user

MichaelDotKnox MichaelDotKnox · Accepted Answer · 2017-04-09T15:19:13

You probably need to enable CORS:

In your WebApiConfig.cs file, add this:

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

CORS is a check by the browser to enforce same origin policy when the call is made using scripting. You won't see it when using something like Fiddler or when accessing the api directly in the browser.

Getting the response as "data":null,"status":-1 when calling web api from AngularJS

1 Answers