Search code examples
javascriptangularjsapirestangular-resource

How to use nested resources in RESTful API?

I am new to REST API. Please help me to list all Albums, ordered by User name and if some User is clicked, show all albums of this user. This is the code I've written until now but it doesn't show me the right thing.

These are resources:
http://jsonplaceholder.typicode.com/users
http://jsonplaceholder.typicode.com/albums

And this is the code I've written:

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>

Thank you

Solution

  • You are not using $resource service properly. I'd suggest to use the $promise property:

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

    and

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

    In the future, please carefully read the documentaton, before asking standard questions here:

    https://docs.angularjs.org/api/ngResource/service/$resource

    P.S.: In your case you might need to chain the two resource promises, because you need the result of the first resource in the second.