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

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

javascript json angularjs

Javascript 如何在AngularJS应用程序中正确使用jSON响应,javascript,json,angularjs,Javascript,Json,Angularjs,我正在开发一个Angular应用程序，它连接到WebAPI http服务来检索“ServiceRequest”对象的JSON集合 WebAPI部分工作正常（通过Fiddler验证返回JSON）我有一个控制器和一个服务（调用WebAPI）我的控制器是： angular.module('frontEndApp').controller('ViewExistingRequestsCtrl', ['$scope', 'requestsRepository', function ($scope,

我正在开发一个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>


查看现有请求




搜索：

没有什么可展示的

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

试试这个：

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

虽然发布代码很有帮助，但请尝试为您的答案添加一些解释，使其更加有用。$scope.sendrequest与$scope.requests有何关系？到目前为止，我的ng repeat将生成正确数量的行，但它们都是空的。我的假设是，$scope.requests应该包含一组JSON对象，这些对象是从requestsRepository.getServiceRequests（）检索的；还有一些东西不见了，只是不确定是什么-Eugene requestsRepository中的日志将以下内容输出到浏览器控制台：数据：键：此键的0值：{“RequestorName”：“Eugene Goldberg”，“RequestorBusiness Unit”：“TMG”，“CustomerName”：“Zurich”，“CscContactPerson”：null，“IsWbsCodeAvailable”：null，“SalesforceIdNumber”：null，“ProjectCtv”：null，“RequestedCompletionDate”：null，“ToBeUsedForCloudMigration”：null，“ToBeUsedForDatacenterMove”：null，“ToBeUsedForServerRefresh”：null，“DataRequirements”：null，“SelectedCountries”：null，“DataProtectionRequirements”：null}，但控制器和视图仍然没有得到任何更新：当我只使用{request}在我的视图绑定中，我确实看到整个JSON对象显示为所有大括号、引号等…因此数据确实会出现，只是不适合正确的格式。请创建Fiddler，我将帮助您

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