CODEWITHSUNDEEP
javascriptjsonangularjs
Eugene Goldberg
Eugene Goldberg

Reputation: 15534

How to properly use jSON responce in AngularJS app

I'm working on an Angular app, which connects to a WebAPI http service to retrieve a JSON collection of "ServiceRequest" objects.

The WebAPI part works fine (verified returning JSON with Fiddler).

I have a controller and a service (which makes the call to WebAPI).

My controller is:

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

My service is:

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

The function in question is: getServiceRequests As you can see, I'm verifying the received data in my service by looping over the "data" - which does print out the correct JSON content. However, back in my controller - $scope.requests remains undefined, so my view:

<!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>

has nothing to show.

How can I make this all work together, please?

Upvotes: 0

Views: 95

Answers (1)

sylwester
sylwester

Reputation: 16498

Try this:

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

Upvotes: 1

Related Questions