Question

我正在开发一个Angular应用程序，该应用程序连接到WebAPI http服务以检索“ServiceRequest”对象的JSON集合。

WebAPI部分工作正常（通过Fiddler验证返回JSON）。

我有一个控制器和一个服务（调用WebAPI）。

我的控制器是：

angular.module('frontEndApp').controller('ViewExistingRequestsCtrl', ['$scope', 'requestsRepository',
  function ($scope, requestsRepository) {
      $scope.requests = requestsRepository.getServiceRequests();
  }]);

我的服务是：

frontEndApp.factory('requestsRepository',  function ($http) {

    var postServiceRequest = function (ServiceRequest) {
        $http({
            url: 'http://localhost:8080/api/ServiceRequests',
            method: "POST",
            data: ServiceRequest,
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data, status, headers, config) {
            console.log("postServiceRequest Status: " + status);
        }).error(function (data, status, headers, config) {
            console.log("postServiceRequest FAILURE: " + status + "  ServiceRequest:  " + ServiceRequest);
        });
    };

    var getServiceRequests = function () {
        $http({ method: 'GET', url: 'http://localhost:8080/api/ServiceRequests' }).
    success(function (data, status, headers, config) {
        var result = new Array();
        for (var key in data) {

            console.log("data: key: " + key + "   value at this key: " + data[key]);
            result.push(data[key]);
        }
        return data;
    }).
    error(function (data, status, headers, config) {
        return status;
    });
    };

    return { postServiceRequest: postServiceRequest, getServiceRequests: getServiceRequests };
});

有问题的函数是：getServiceRequests 正如您所看到的，我正在通过循环“数据”验证我的服务中收到的数据 - 这会打印出正确的JSON内容。但是，回到我的控制器 - $ scope.requests仍未定义，所以我的观点：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>View Existing Requests</title>
    <link href="../Content/ListGroupStyles.css" rel="stylesheet" />
</head>
<body ng-controller="ViewExistingRequestsCtrl">

    <div class="container">
        <div>
            <div></div>
            <div>
                <br /><br /><br />
                Search: <input ng-model="query">
                <br /><br />
            </div>
            <div>
                <div ng-repeat="request in requests">
                        <a class="list-group-item" href="#/editServiceRequest">
                            <strong>Requestor:</strong> {{request.RequestorName}} <strong>Requestor Business Unit:</strong> {{request.RequestorBsuinessUnit}}
                            <strong>Customer Name:</strong> {{request.CustomerName}}
                        </a>
                    <br />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

没有任何表现。

我怎样才能让这一切合作呢？

Answer 1

试试这个：

frontEndApp.factory('requestsRepository', function ($http) 
{
    var _result = [];
    var postServiceRequest = function (ServiceRequest) 
    {
        $http(
        {
            url : 'http://localhost:8080/api/ServiceRequests', method : "POST", data : ServiceRequest, 
            headers : {
                'Content-Type' : 'application/json' 
            }
        }).success(function (data, status, headers, config) 
        {
            console.log("postServiceRequest Status: " + status);
        }).error(function (data, status, headers, config) 
        {
            console.log("postServiceRequest FAILURE: " + status + "  ServiceRequest:  " + ServiceRequest);
        });
    };
    var getServiceRequests = function () 
    {
        $http({
            method : 'GET', url : 'http://localhost:8080/api/ServiceRequests' 
        }). success(function (data, status, headers, config) 
        {
            for (var key in data) 
            {
                console.log("data: key: " + key + "   value at this key: " + data[key]);
                _result.push(data[key]);
            }
            return data;
        }). error(function (data, status, headers, config) 
        {
            return status;
        });
    };
    return {
        postServiceRequest : postServiceRequest, getServiceRequests : getServiceRequests, result : _result 
    };
});

angular.module('frontEndApp').controller('ViewExistingRequestsCtrl', ['$scope', 'requestsRepository', 
    function ($scope, requestsRepository) 
    {
        $scope.sendrequest = requestsRepository.getServiceRequests();
        $scope.requests = requestsRepository.result;
    }]
);

如何在AngularJS应用程序中正确使用jSON响应

1 个答案: