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

请看这里：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

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

[{＆＃34;帖子ID＆＃34;：1，＆＃34;显示名＆＃34;：＆＃34;斯科特＆＃34;＆＃34;消息＆＃34;：＆＃34; MESSAGE1＆＃34 ;，＆＃34;回复＆＃34;：[{＆＃34; replyId＆＃34;：1，＆＃34;显示名＆＃34;：＆＃34;韦恩＆＃34;＆＃34;消息＆＃34; ：＆＃34; test111＆＃34;}，{＆＃34; replyId＆＃34;：2＆＃34;显示名＆＃34;：＆＃34;摆锤＆＃34;＆＃34;消息＆＃34 ;: ＆＃34; test112＆＃34;}，{＆＃34; replyId＆＃34;：3，＆＃34;显示名＆＃34;：＆＃34;盂兰盆＆＃34;＆＃34;消息＆＃34;：＆＃34; test113＆＃34;}，{＆＃34; replyId＆＃34：4，＆＃34;显示名＆＃34;：＆＃34;乙＆＃34;＆＃34;消息＆＃34;：＆＃ 34; test114＆＃34;}]}，{＆＃34;帖子ID＆＃34;：2＆＃34;显示名＆＃34;：＆＃34;比尔＆＃34;＆＃34;消息＆＃34;：＆＃34; message12＆＃34;＆＃34;回复＆＃34;：[{＆＃34; replyId＆＃34;：1，＆＃34;显示名＆＃34;：＆＃34;韦恩＆＃34;＆＃ 34;消息＆＃34;：＆＃34; test211＆＃34;}，{＆＃34; replyId＆＃34;：2＆＃34;显示名＆＃34;：＆＃34;摆锤＆＃34;＆＃34 ;消息＆＃34;：＆＃34; test212＆＃34;}]}，{＆＃34;帖子ID＆＃34;：3，＆＃34;显示名＆＃34;：＆＃34;韦恩＆＃34;＆＃ 34;消息＆＃34;：＆＃34; message12＆＃34;＆＃34;回复＆＃34;：[{＆＃34; replyId＆＃34;：1，＆＃34;显示名＆＃34;：＆＃34 ;韦恩＆＃34;＆＃34;消息＆＃34;：＆＃ 34; test311＆＃34;}，{＆＃34; replyId＆＃34;：2＆＃34;显示名＆＃34;：＆＃34;摆锤＆＃34;＆＃34;消息＆＃34;：＆＃34 ; test312＆＃34;}，{＆＃34; replyId＆＃34;：3，＆＃34;显示名＆＃34;：＆＃34;盂兰盆＆＃34;＆＃34;消息＆＃34;：＆＃34; test313＆＃34;}]}，{＆＃34;帖子ID＆＃34：4，＆＃34;显示名＆＃34;：＆＃34;邦尼＆＃34;＆＃34;消息＆＃34;：＆＃34 ; message12＆＃34;＆＃34;回复＆＃34;：[{＆＃34; replyId＆＃34;：1，＆＃34;显示名＆＃34;：＆＃34;韦恩＆＃34;＆＃34;消息＆＃34;：＆＃34; test411＆＃34;}，{＆＃34; replyId＆＃34;：2＆＃34;显示名＆＃34;：＆＃34;摆锤＆＃34;＆＃34;消息＆＃34;：＆＃34; test412＆＃34;}，{＆＃34; replyId＆＃34;：3，＆＃34;显示名＆＃34;：＆＃34;盂兰盆＆＃34;＆＃34;消息＆＃ 34;：＆＃34; test413＆＃34;}，{＆＃34; replyId＆＃34;：3，＆＃34;显示名＆＃34;：＆＃34;盂兰盆＆＃34;＆＃34;消息＆＃34 ;：＆＃34; test414＆＃34;}，{＆＃34; replyId＆＃34：4，＆＃34;显示名＆＃34;：＆＃34;乙＆＃34;＆＃34;消息＆＃34; ：＆＃34; test415＆＃34;}]}，{＆＃34;帖子ID＆＃34;：5，＆＃34;显示名＆＃34;：＆＃34;吉娜＆＃34;＆＃34;消息＆＃34 ;：＆＃34; message12＆＃34;＆＃34;回复＆＃34;：[{＆＃34; replyId＆＃34;：1，＆＃34;显示名＆＃34;：＆＃34;韦恩＆＃34; ＆＃34;消息＆＃34;：＆＃34; TEST5 11＆＃34;}，{＆＃34; replyId＆＃34;：2＆＃34;显示名＆＃34;：＆＃34;摆锤＆＃34;＆＃34;消息＆＃34;：＆＃34; test512＆＃34;}，{＆＃34; replyId＆＃34;：3，＆＃34;显示名＆＃34;：＆＃34;盂兰盆＆＃34;＆＃34;消息＆＃34;：＆＃34; test513＆＃ 34;}，{＆＃34; replyId＆＃34：4，＆＃34;显示名＆＃34;：＆＃34;乙＆＃34;＆＃34;消息＆＃34;：＆＃34; test514＆＃34 ;}]}]

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

2 个答案: