$routeParams gets undefined in angularjs?

Question

I am making a call an http call to a json file. In the first controller I get the categories , and in the second controller I get the category with a certain ID.

The url gets updated with an categoryid but the $routeParams is shown undefined and cannnot access the file.

Here is my code:

$stateProvider.state('categories', {
  url: '/category',
  templateUrl: 'templates/categories.html',
  controller: 'CategoriesCtrl'
});
$stateProvider.state('postC', {
  url: '/category/:category',
  templateUrl: 'templates/postsc.html',
  controller: 'PostCtrl'
});

In the controller I have the following:

angular.module('myapp')

.controller('CategoriesCtrl', ['$scope', '$http',
  function($scope, $http) {
    $http.get("~/wp/v2/terms/category")
      .then(function(res) {
        $scope.categories = res.data;
      })
  }
])

.controller('PostCtrl', ['$scope', '$http', '$routeParams',
  function($scope, $http, $routeParams) {
    $http.get("~/wp/v2/terms/category/" + $routeParams.category).success(function(res) {

      $scope.current_category_id = $routeParams.category;
      console.log($routeParams.category);
      $scope.pageTitle = 'Posts in ' + res.data.name + ':';
      document.querySelector('title').innerHTML = 'Category: ' + res.data.name + ' | AngularJS Demo Theme';

      $http.get("~/wp/v2/posts/?filter[category_name]=" + res.data.name).success(function(res) {
        $scope.posts = res.data;
        console.log($scope.posts);
      })

    })
  }
]);

The view for the categories is the following:

<div class="list">
  <a ng-repeat="category in categories" href="#/category/{{category.id}}" class="item item-thumbnail-left">
    <h2>{{category.name}}</h2>
  </a>
</div>

And when I click on the category the URL becomes: http://localhost:8100/#/category/12, but the $stateparams.category in ~/wp/v2/terms/category/" + $routeParams.category is undefined therefor the http request cannot go through.

I cannot figure it out what am I missing ?

ftshtw · Accepted Answer · 2015-12-18 08:45:24Z

3

Try changing $routeParams with $stateParams in every instance. You're obviously using ui-router which uses "states", while ngRouter uses "routes".

angular.module('myapp')

.controller('CategoriesCtrl', ['$scope', '$http',
  function($scope, $http) {
    $http.get("~/wp/v2/terms/category")
      .then(function(res) {
        $scope.categories = res.data;
      })
  }
])

.controller('PostCtrl', ['$scope', '$http', '$stateParams',
  function($scope, $http, $stateParams) {
    $http.get("~/wp/v2/terms/category/" + $stateParams.category).success(function(res) {

      $scope.current_category_id = $stateParams.category;
      console.log($stateParams.category);
      $scope.pageTitle = 'Posts in ' + res.data.name + ':';
      document.querySelector('title').innerHTML = 'Category: ' + res.data.name + ' | AngularJS Demo Theme';

      $http.get("~/wp/v2/posts/?filter[category_name]=" + res.data.name).success(function(res) {
        $scope.posts = res.data;
        console.log($scope.posts);
      })

    })
  }
]);

edited Dec 18, 2015 at 8:45

answered Dec 18, 2015 at 8:41

ftshtw

6291 gold badge7 silver badges19 bronze badges

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

3 Comments

Beslinda N. Over a year ago

so instead of $stateParams I write $routeParams.. I will try now

ftshtw Over a year ago

And also try console.log($stateParams); before $http.get... to see everything before GET happens, just FYI.

Beslinda N. Over a year ago

Perfect. Thank you so much

Community · Accepted Answer · 2017-05-23 12:23:47Z

2

You might want to double-check the code near

.controller('PostCtrl', ['$scope','$http','$rootScope', function($scope, $http, $routeParams)

it should be

.controller('PostCtrl', ['$scope','$http','$rootScope', '$routeParams', function($scope, $http, $rootScope, $routeParams)

Read more here on syntax of creating a Controller. You are missing injectors.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Dec 18, 2015 at 8:27

Quy

3810 bronze badges

5 Comments

Beslinda N. Over a year ago

Ops yes that was a type. I fixed it but still I have the same prb

Quy Over a year ago

Are you able to console.log the $routeParams variable? Besides, which one is undefined: $routeParams.category or $routeParams.categoryId?

Beslinda N. Over a year ago

$routeParams.category is undefined (ignore the categoryid).I consolelog it but it is undefined

Pankaj Parkar Over a year ago

Its incorrect answer..'ui.router' doesn;t give information in $routeParams object..

Quy Over a year ago

@PankajParkar - yeah, the code snippest has plenty of coding error. I have just correct one of them. Though it was very important, too.

Collectives™ on Stack Overflow

$routeParams gets undefined in angularjs?

2 Answers 2

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related