Obtendo a resposta como “dados”: nulo, “status”: - 1 ao chamar a API da Web do AngularJS

Question

Apr 08, 2017, 11:43 AM

angularjs-http angularjs asp.net-web-api

Obtendo a resposta como “dados”: nulo, “status”: - 1 ao chamar a API da Web do AngularJS

Estou tentando chamar o método GET da API da Web do Angular JS 1.6.0 e obtendo o seguinte erro: -

Rejeição possivelmente não tratada: {"data": null, "status": - 1, "config": {"method": "GET", "transformRequest": [null], "transformResponse": [null], "jsonpCallbackParam" : "retorno de chamada", "url": "http: // localhost: 51972 / api / video"," headers ": {" Accept ":" application / json, text / plain,/"}}," statusText ":" "}

Estou recebendo a resposta JSON adequada quando chamo o mesmo método GET do Fiddler 4 e retornando o texto JSON.

Observe que minha API WEB e código Angular JS estão em um diretório diferente.

Conforme o comentário de Dez, modifiquei o WebApiConfig.cs para retornar a resposta JSON do 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;
        }
}

Quando digito 'http: // localhost: 51972 / api / video'e aperte, então eu recebo a resposta adequada (JSON) como abaixo: -

 [{"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;
    });
});

Quando tento depurar a chamada Get da API WEB do Angular JS, vejo que ele está chamando o método Get da API da Web, mas nada está retornando da API da Web. Como você pode ver, coloquei alerta na resposta em $ http end, que também não está sendo executada também.

Qualquer ajuda seria apreciada.