$stateParams returns empty object in angularjs

Question

I am using MEANstack. Here is the simple stateparams that returns the empty object. Code :

route.js

var app = angular.module('mean-blog.home', [
'ui.router']);

app.config(function($stateProvider, $urlRouterProvider){ $stateProvider

                .state('organizers', {
            url: '/organizers',
            templateUrl: '/home/templates/organizers.html',
            controller: 'OrganizerCtrl'
        })
                .state('viewprofile', {
            url: '/vieworganizer/:organizerid',
            templateUrl: '/home/templates/viewprofile.html',
            controller: 'viewProfileCtrl'
        })
    $urlRouterProvider.otherwise("/");
});

controller.js

.controller('viewProfileCtrl', function($scope, Users, $stateParams) {
    console.log($stateParams) //returns empty object
})

View File

 <p> {{organizer._id}}</p>
  <a ui-sref="vieworganizer({organizerid:organizer._id})">
      <i class="fa fa-edit"></i>Edit
</a>

This ui-sref is also giving me the following error.

Error: Could not resolve 'vieworganizer' from state ''
transitionTo@https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3140:17
go@https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3068:14
link/</transition<@https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:4181:13
f/l<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:138:473
e@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:40:72
nf/n.defer/c<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:44:155

If i open the direct url

http://localhost:3000/vieworganizer/59b8c14ebed9a011bc5acb54

it returns empty stateparams object.

Anyone who can help me to solve this issue!

You don't appear to be injecting $stateParams. Shouldn't it be .controller('viewProfileCtrl', ['$scope', 'Users', '$stateParams', function($scope, Users, $stateParams) { .... — rrd
– rrd, Commented Sep 13, 2017 at 8:42

Sajeetharan · Accepted Answer · 2017-09-13 08:35:15Z

0

You do not have a state named vieworganizer , it should be

<a ui-sref="viewprofile ({organizerid:organizer._id})">

answered Sep 13, 2017 at 8:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Simerjit Parmar Over a year ago

Thanks,1 issue has been solved. another one is empty stateparams.. Will you help me on this please

Sajeetharan Over a year ago

change it as <a ui-sref="viewprofile ({organizerid:'organizer._id'})">

Simerjit Parmar Over a year ago

Error: Could not resolve 'vieworganizer' from state '' issue has been solved as the state name was different. Now the issue is, I am not able to get stateparams value in controller as it returns empty object.

Simerjit Parmar Over a year ago

adding quotes changes its type to string and not able to get variable data, so again empty object and not able to get id as it acts as a string

Sajeetharan Over a year ago

did you see if its actually getting the data?

|

Gaurav Kumar Singh · Accepted Answer · 2017-09-13 08:42:38Z

0

You need to update the view file

<p> {{organizer._id}}</p>
  <a ui-sref="viewprofile({organizerid:organizer._id})">
      <i class="fa fa-edit"></i>Edit
</a>

viewprofile is the state which is defined in app.config file for url /vieworganizer/:organizerid

answered Sep 13, 2017 at 8:42

Gaurav Kumar Singh

1,5703 gold badges11 silver badges31 bronze badges

2 Comments

Simerjit Parmar Over a year ago

solution for empty stateparams?

Gaurav Kumar Singh Over a year ago

have you tried the $scope.params instead of $stateParams for getting the parameters?

Collectives™ on Stack Overflow

$stateParams returns empty object in angularjs

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related