2014-09-29 72 views
0

我正在尝试使用AngularJS服务向WebAPI发出HTTP请求,并使用两个嵌套的ng-repeat(帖子和回复)加载HTML页面。我可以让{{post.displayName}}填充到我的浏览器中,但不会加载回复。任何人都可以协助AngularJS服务没有正确使用JSON正确使用JSON

的JSON从的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"}}] 

我的服务:

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

任何帮助,将不胜感激!

+0

尝试添加.json到您的URL像这样的网址:“http:// localhost:59327/posts/details.json”并尝试 – 2014-09-29 21:13:46

+0

尝试说“回复posts.replies”。 – 2014-09-29 21:23:55

回答

1

请看这里:http://plnkr.co/edit/pMeopZwm2ZybIXvTRucy?p=preview

你的每个职位只有一个名为replies一个对象,更有可能的是应重放的数组,所以你可以像下面访问:由SSS

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

答案最初做了工作,但是在更新我的JSON以使用回复列表时我得到了最佳结果:

[{“postId”:1,“displayName”:“Scott”,“message”:“message1”, “回复”:[{ “replyId”:1, “显示名”: “韦恩”,“MESSA GE “:” test111 “},{” replyId “:2”,显示名 “:” 鲍勃”, “消息”: “test112”},{ “replyId”:3 “显示名”: “盂兰盆”, “消息” : “test113”},{ “replyId”:4 “显示名”: “乙”, “消息”: “test114”}]},{ “帖子ID”:2 “显示名”: “比尔”, “消息” : “message12”, “回复”:[{ “replyId”:1, “显示名”: “韦恩”, “消息”: “test211”},{ “replyId”:2 “显示名”: “鲍勃”,”消息 “:” test212 “}]},{” 帖子ID “:3”,显示名 “:” 韦恩 “ ”消息“: ”message12“, ”回复“:[{ ”replyId“:1, ”显示名“:”韦恩”, “消息”: “test311”},{ “replyId”:2 “显示名”: “鲍勃”, “消息”: “test312”},{ “replyId”:3 “显示名”: “盂兰盆” , “消息”: “test313”}]},{ “帖子ID”:4 “显示名”: “邦尼”, “消息”: “message12”, “回复”:[{ “replyId”:1, “显示名” : “韦恩”, “消息”: “test411”},{ “replyId”:2 “显示名”: “鲍勃”, “消息”: “test412”},{ “replyId”:3 “显示名”:”盂兰盆”, “消息”: “test413”},{ “replyId”:3 “显示名”: “盂兰盆”, “消息”: “test414”},{ “replyId”:4 “显示名”: “乙” , “消息”: “test415”}]},{ “帖子ID”:5 “显示名”: “吉娜”, “消息”: “message12”, “回复” :[{ “replyId”:1, “显示名”: “韦恩”, “消息”: “test511”},{ “replyId”:2 “显示名”: “鲍勃”, “消息”: “test512”}, { “replyId”:3 “显示名”: “盂兰盆”, “消息”: “test513”},{ “replyId”:4 “显示名”: “乙”, “消息”: “test514”}]}]