CODEWITHSUNDEEP
jsonangularjshttp
Wayne
Wayne

Reputation: 1

AngularJS service not consuming JSON correctly with HTTP

I am attempting to make a HTTP request to a WebAPI using a AngularJS service and load a HTML page with two nested ng-repeat's (posts and replies). I can get the {{ post.displayName }} to populate in my browser, but replies aren't loading. Can anyone assist?

the JSON from the WebAPI:

[{"postId":1,"displayName":"Scott","message":"message1","replies":{"replyId":1,"displayName":"wayne","message":"test11"}},{"postId":2,"displayName":"Bill","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}},{"postId":3,"displayName":"Wayne","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}},{"postId":4,"displayName":"Bonnie","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}},{"postId":5,"displayName":"Gina","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}}]

My Service:

// This handles the database work for posting

gwApp.service('postService', function ($http, $q) {

    // ---
    // PUBLIC METHODS.
    // ---

    this.getPosts = function () {

            var request = $http({
                method: "get",
                url: "http://localhost:59327/posts/details",
                params: {
                    action: "get"
                }
            });

            return (request.then(handleSuccess, handleError));

    };

    // ---
    // PRIVATE METHODS.
    // ---


    // Transform the error response, unwrapping the application dta from
    // the API response payload.
    function handleError(response) {

        // The API response from the server should be returned in a
        // nomralized format. However, if the request was not handled by the
        // server (or what not handles properly - ex. server error), then we
        // may have to normalize it on our end, as best we can.
        if (
            !angular.isObject(response.data) ||
            !response.data.message
            ) {

            return ($q.reject("An unknown error occurred."));

        }

        // Otherwise, use expected error message.
        return ($q.reject(response.data.message));

    }


    // Transform the successful response, unwrapping the application data
    // from the API response payload.
    function handleSuccess(response) {

        return (response.data);

    }

});

My Controller:

//This controller retrieves data from the services and associates then with the $scope
//The $scope is ultimately bound to the posts view

gwApp.controller('PostController', function ($scope, postService) {

    $scope.posts = [];

    loadRemoteData();

    // public methods


    // private methods

    function applyRemoteData(newPosts) {

        $scope.posts = newPosts;

    }

    function loadRemoteData() {

    //    $scope.posts = postService.getPosts();

        postService.getPosts()
            .then(
                function (posts) {
                    applyRemoteData(posts);
                }
            );
    }
});

My HTML code snippet:

this returns 3 blank table rows

<tr data-ng-repeat="reply in post.replies">
  <td>
    {{ reply.message }}
  </td>
</tr>

This returns the valid data from my JSON:

<tr data-ng-repeat="post in posts">
  <td>
    PostId: {{ post.postId }} {{ post.displayName }}
  </td>
</tr>

Any help would be much appreciated!

Upvotes: 0

Views: 113

Answers (2)

Wayne
Wayne

Reputation: 1

The answer by sss did work initially, but I got the best result when updating my JSON to use a list for the replies:

[{"postId":1,"displayName":"Scott","message":"message1","replies":[{"replyId":1,"displayName":"wayne","message":"test111"},{"replyId":2,"displayName":"bob","message":"test112"},{"replyId":3,"displayName":"bon","message":"test113"},{"replyId":4,"displayName":"ethan","message":"test114"}]},{"postId":2,"displayName":"Bill","message":"message12","replies":[{"replyId":1,"displayName":"wayne","message":"test211"},{"replyId":2,"displayName":"bob","message":"test212"}]},{"postId":3,"displayName":"Wayne","message":"message12","replies":[{"replyId":1,"displayName":"wayne","message":"test311"},{"replyId":2,"displayName":"bob","message":"test312"},{"replyId":3,"displayName":"bon","message":"test313"}]},{"postId":4,"displayName":"Bonnie","message":"message12","replies":[{"replyId":1,"displayName":"wayne","message":"test411"},{"replyId":2,"displayName":"bob","message":"test412"},{"replyId":3,"displayName":"bon","message":"test413"},{"replyId":3,"displayName":"bon","message":"test414"},{"replyId":4,"displayName":"ethan","message":"test415"}]},{"postId":5,"displayName":"Gina","message":"message12","replies":[{"replyId":1,"displayName":"wayne","message":"test511"},{"replyId":2,"displayName":"bob","message":"test512"},{"replyId":3,"displayName":"bon","message":"test513"},{"replyId":4,"displayName":"ethan","message":"test514"}]}]

Upvotes: 0

sylwester
sylwester

Reputation: 16498

PLease see here: http://plnkr.co/edit/pMeopZwm2ZybIXvTRucy?p=preview

Your each post has only one object called replies, more likely that should be array of replays so you can access it like below :

 <table>
  <tr data-ng-repeat="post in posts">
  <td>
    PostId: {{ post.postId }} {{ post.displayName }}
    <ul>
      <li>{{post.replies.displayName}}: {{post.replies.message }}</li>

    </ul>
  </td>
</tr>

</table>

Upvotes: 1

Related Questions