如何在 RESTful API 中使用嵌套资源？答案

【问题标题】：How to use nested resources in RESTful API?如何在 RESTful API 中使用嵌套资源？
【发布时间】：2015-12-23 14:52:13
【问题描述】：

我是 REST API 的新手。请帮我列出所有专辑，按用户名排序，如果单击某个用户，则显示该用户的所有专辑。这是我到现在为止写的代码，但它没有告诉我正确的东西。

这些是资源：
http://jsonplaceholder.typicode.com/users
http://jsonplaceholder.typicode.com/albums

这是我写的代码：

var app = angular.module('christmas', ['ngResource']);

app.controller('SecretOperations', ['$scope', '$resource', function($scope, $resource) {
            $scope.loadPosts = function() {
                
                var postingsResource = $resource('http://jsonplaceholder.typicode.com/albums/', {});
                $scope.postings = postingsResource.query();
                postingsResource.query().$promise.then(function(postings){
                    $scope.postings = postings;
                });
                var useri = $scope.postings.userId;
                var numeUser = $resource('http://jsonplaceholder.typicode.com/users?id=idu', { idu : useri });
                $scope.off = numeUser.query();
            };
            $scope.loadPosts();
                        
        }]);

<!DOCTYPE HTML>
<html  ng-app="christmas">
<head></head>
<body >
      <div class="row" ng-controller="SecretOperations">
                <div class="col-md-3 text-center" ng-repeat="album in postings">
                    <div>
                        
                        <p class="text-muted">Album title: {{ album.title }}</p>
                        <p ng-repeat="offof in off"> Author name : {{ offof.name }} </p>
                    </div>
                </div>
        </div>    
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js"></script>
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="app.js"></script>
</body>
</html>

谢谢

【问题讨论】：

您的问题基本上是要求提供一个可行的解决方案。你能缩小你的问题吗？你在哪个部分有问题？的JavaScript？角度 html 标记？此外，您的代码 sn-p 不起作用。你能创建一个有效的 jsFiddle 或 Plunker 吗？
我必须列出作者订购的所有专辑（这是用户名）。如果点击某个作者，我必须显示该作者的所有专辑。我编写的代码是我网站的一部分，也是我遇到问题的部分。此代码显示专辑标题，但无序且没有用户名。我不知道如何编写我的 angularjs 代码来执行此操作，也不知道如何显示它们。谢谢你帮助我

标签： javascript angularjs api rest angular-resource

【解决方案1】：

您没有正确使用$resource 服务。我建议使用$promise 属性：

postingsResource.query().$promise.then(function (postings) {
    $scope.postings = postings;
});

和

nameUser.get().$promise.then(function (user) {
    $scope.authorn = user;
});

以后，请仔细阅读文档，在在这里提出标准问题：

https://docs.angularjs.org/api/ngResource/service/&dollar;resource

P.S.：在您的情况下，您可能需要链接两个资源承诺，因为您需要第二个资源中的第一个资源的结果。

【讨论】：

我编辑了我的代码，但我仍然不明白如何才能显示按作者排序的相册...