Passing an object in Angular ui router - stateParam

Question

I am wondering if it is possible to pass JSON object within the stateParams in angular ui router. So far, when I am trying to pass an object, I log it and get "[object Object]".

I did some research, and found this topic: AngularJS: Pass an object into a state using ui-router however, none of the answers work for me.

So far, I've tried this:

<a ui-sref="profile({user: data})"></a>

where:

   .state('profile', {
        url: "/profile/:user",
         templateUrl: "profile/profile.html",
        controller: "ProfileCtrl",
        params : { user: null }
     })

Any ideas?

EIDT: and variable data should look like that:

{
"_id": "5612d4f138cf125420331d1e",
"index": 0,
"guid": "2fa8a98f-902e-4dfd-a8ac-24e3fdc52d8c",
"isActive": false,
"balance": "$3,957.95",
"picture": "xxxxx",
"age": 23,
"eyeColor": "brown",
"name": "xxxxxxx",
"gender": "female",
"company": "xxxx",
"email": "[email protected]",
"phone": "xxxxx",
"address": "xxxxx"}

And the link that I get from the browser is the following "http://localhost:8888/#/profile/%5Bobject%20Object%5D"

So far, here is the trick that worked for me:

Using
ng-click="goToProfile(data)"

instead of ui-sref, and the function is

$scope.goToProfile= function(data){
            var object = data;
            $state.go('profile', {user: object})  ;
        };

:user is already available in your $state.params.user. So in your ProfileCtrl just access it via $state.params.user of course making sure that you have injected "$state" into your controller. — ewahner
– ewahner, Commented Oct 5, 2015 at 19:42
@uksz It actually worked, as JSON.stringify is not recursive and thus only converted the 1st level object to string. Try logging this in Chrome console and you will see the whole object. Otherwise try doing .controller('ProfileCtrl', function($stateParams) { console.log(JSON.stringify($stateParams.user)); }); in your current browser to see the user object. — masimplo
– masimplo, Commented Oct 5, 2015 at 19:52

Community · Accepted Answer · 2017-05-23 10:28:34Z

0

I believe you are passing the object correctly. Problem is you are using console.log to log an object in a browser that only displays the object reference which prints [object Object] (versions of IE are known to do that).

You could use console.dir instead of console.log (explained here) or wrap your object in JSON.stringify to display the object as string. You could also use a different browser's console (chrome comes to mind) or output the object in the html template like so:

.controller('ProfileCtrl', function($stateParams) { 
    var vm = this;
    vm.user = $stateParams.user;
 })

And in your template:

<div ng-controller="ProfileCtrl as vm">
    <pre>{{vm.userObj|json}}</pre>
</div>

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Oct 5, 2015 at 19:58

masimplo

3,8042 gold badges34 silver badges52 bronze badges

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

2 Comments

uksz Over a year ago

Trying that, will let you know in a sec

uksz Over a year ago

Didn't solved an issue. However, I found out that by using ng-click="goToProfile(data)" and $scope.goToProfile= function(data){ var object = data; $state.go('profile', {user: object}) ; };, I passed the data without any problem

Collectives™ on Stack Overflow

Passing an object in Angular ui router - stateParam

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related