AngularJS服务未使用HTTP正确使用JSON

Question

我正试图使用AngularJS服务向WebAPI发出HTTP请求，并加载一个带有两个嵌套ng repeat的HTML页面（帖子和回复）。我可以在浏览器中填充｛｛post.displayName｝｝，但不会加载回复。有人能帮忙吗？

来自WebAPI:的JSON

[{"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"}}]

我的服务：

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

我的控制器：

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

我的HTML代码片段：

这将返回3个空白表格行

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

这将从我的JSON:返回有效数据

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

任何帮助都将不胜感激！

Answer 1

p请参阅此处：http://plnkr.co/edit/pMeopZwm2ZybIXvTRucy?p=preview

您的每个帖子只有一个名为replies的对象，很可能应该是重播数组，这样您就可以访问它，如下所示：

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

Answer 2

ss的答案最初确实有效，但在更新JSON以使用回复列表时，我得到了最好的结果：

[｛"postId"：1，"displayName"："Scott"，"message"："message1"，"replyes"：[｛"replyId"：1，"displayName"："wayne"，"message"："test111"｝，｛"replyId"：2，"display Name"：，｛"postId"：2，"displayName"："Bill"，"message"："message12"，｛"postId"：3，"displayName"："Wayne"，"message"："message12"，"replies"：[｛"replyId"：1，"dispayName"：《Wayne》，"message》：《test311》｝，｛"replyId》：2，"display Name"：，｛"postId"：4，"displayName"："Bonnie"，"message"："message12"，"replies"：[｛"replyId"：1，"dispayName"："wayne"，"message"："test411"｝，｛"replyId"：2，"displayName d"：4，"displayName"："ethan"，"message"："test415"}]}，｛"postId"：5，"displayName"："Gina"，"message"："message12"，"replies"：[｛"replyId"：1，"display Name"：