-1

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

Tina Mih
  • 3
  • 3
  • Your question is basically asking to give a working solution. Can you narrow your question down? which part are you having trouble with? the javascript? the angular html markup? Also, your code snippet doesn't work. Can you create a jsFiddle or Plunker which works? – SoluableNonagon Dec 23 '15 at 15:02
  • I have to list all the albums ordered by the author( which is the user name). And if some author is clicked,i have to show all albums of this author. The code i`ve wrote is a part of my website and the part which i have trouble with. This code displays the album title but unordered and without the name of the user. I don t know how to write my angularjs code to do this, nether how to display them. thank you for helping me – Tina Mih Dec 23 '15 at 15:14

1 Answers1

0

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/&dollar;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.

FlorianTopf
  • 938
  • 6
  • 10
  • I edited my code but i still don`t understant what i have to do to display my albums ordered by author ... – Tina Mih Dec 23 '15 at 17:58