Retrieving data from dynamic URL - angular

Question

I'm trying to retrieve data with the following code, where the URL of the service has a dynamic parameter ie. the id, there is something wrong because the data isn't displaying, when I load the URL in the browser with this on the end:

../categories/165

could I get some help please? Thanks.

   ...  
    .when('/categories/:categoryId', {
        controller: 'BookCategoryController',
        templateUrl: 'views/booksincategory.html'
    })
    ...

controller

app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams',  function($scope, bookcategories, $routeParams) {
    bookcategories($scope.id).success(function(data) {
     console.log($scope.id);
    $scope.detail = data.books[$routeParams.categoryId];
    });
}]);

service

  app.service('bookcategories', ['$http', function($http) {
      return {
        get: function(id) {
          return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
        }
      }
    }]);

booksincategory.html

  <div class="category col" ng-repeat="book in detail">
     <h3 class="title">{{book.title}}</h3>
  </div>

you should close this thread ... u did posted new SAME question ... stackoverflow.com/a/46220774/1608841 — user1608841
– user1608841, Commented Sep 14, 2017 at 15:00
Possible duplicate of Passing parameter to $scope.id from URL - angularJS — user1608841
– user1608841, Commented Sep 15, 2017 at 4:43

user1608841 · Accepted Answer · 2017-09-14 14:53:00Z

1

Change your service code to :

 app.service('bookcategories', ['$http', function($http) {
      return {
        getAllBooks: function(id) {
          return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
         }
      }
}]);

and in Controller :

 bookcategories.getAllBooks($scope.id).then(function(response) {
    $scope.detail = response.data.books[$routeParams.categoryId];
 });

EDIT2

You have to define $scope.id somewhere in your controller like below :

$scope.id= 1 ; 
console.log($routeParams.categoryId);//check what you are getting here
bookcategories.getAllBooks($routeParams.categoryId).then(function(response) {
   $scope.detail = response.data.books[$routeParams.categoryId];
});

after this your service URL will go like below (Took this URL from your Question) http://52.41.65.211:8028/api/v1/categories/1/books.json

See 1 in the URL its $scope.id !

edited Sep 14, 2017 at 14:53

answered Sep 14, 2017 at 10:07

user1608841

2,4751 gold badge29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

user1937021 Over a year ago

Doesn't seem to display the data still with that, but it does remove the errors

user1608841 Over a year ago

@user1937021 please check what u are getting in response in Controller using console.log

user1608841 Over a year ago

are you sure you getting response from service ?

user1937021 Over a year ago

ah I get this ""NetworkError: 400 Bad Request - 52.41.65.211:8028/api/v1/categories/undefined/books.json""

user1608841 Over a year ago

can you check value for $scope.id in your code. May be id value is undefined thats why above error is coming

|

Pankaj Parkar · Accepted Answer · 2017-09-14 13:42:06Z

0

.success & .error function(deprecated since angular 1.4.X) are not chainable-friendly, so it prevents to return a promise object from get method. Removing success & error callback will allow to return promise object from function. Consider using .then function over promise since .success & .error callback deprecated.

get: function(id) {
  return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json');
}

//controller code & pass `$routeParams.categoryId` in it
bookcategories($routeParams.categoryId).then(function(response) {
    $scope.detail = response.data.books[$routeParams.categoryId];
});

edited Sep 14, 2017 at 13:42

answered Sep 14, 2017 at 10:01

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Pankaj Parkar Over a year ago

Can you please check this, you should use $routeParams.categoryId instead of $scope.id

Pankaj Parkar Over a year ago

Not sure, why OP overlooked this?

Collectives™ on Stack Overflow

Retrieving data from dynamic URL - angular

2 Answers 2

18 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

18 Comments

2 Comments

Linked

Related