Obteniendo la respuesta como "datos": nulo, "estado": - 1 cuando se llama a la API web desde AngularJS

Question

Apr 08, 2017, 11:43 AM

asp.net-web-api angularjs angularjs-http

Obteniendo la respuesta como "datos": nulo, "estado": - 1 cuando se llama a la API web desde AngularJS

Estoy tratando de llamar al método GET de la API web desde Angular JS 1.6.0 y obtengo el siguiente error: -

Posible rechazo no manejado: {"datos": nulo, "estado": - 1, "config": {"método": "OBTENER", "transformRequest": [nulo], "transformResponse": [nulo], "jsonpCallbackParam" : "devolución de llamada", "url": "http: // localhost: 51972 / api / video"," encabezados ": {" Aceptar ":" application / json, text / plain,/"}}," statusText ":" "}

Recibo la respuesta JSON adecuada cuando llamo al mismo método GET desde Fiddler 4 y devuelvo el texto JSON.

Tenga en cuenta que mi API WEB y el código Angular JS están en un directorio diferente.

Según el comentario de Dez, he modificado WebApiConfig.cs para devolver la respuesta JSON de 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;
        }
}

Cuando escribo 'http: // localhost: 51972 / api / video'y presiono luego obtengo la respuesta adecuada (JSON) de la siguiente manera: -

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

Inicio.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;
    });
});

Cuando trato de depurar WEB API Get call de Angular JS, puedo ver que está llamando al método Web API Get pero no regresa nada de Web API. Como puede ver, puse alerta en la respuesta al final de $ http que tampoco se está ejecutando.

Cualquier ayuda sería apreciada.