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": "xxxx@xxxx.xxx",
"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, Oct 05 '15 at 19:42
.controller('ProfileCtrl', function($stateParams) { console.log($stateParams); }); — uksz, Oct 05 '15 at 19:43
Try logging like this: `.controller('ProfileCtrl', function($stateParams) { console.log(JSON.stringify($stateParams)); });` as [object Object] is just a way for the browser to say you are logging an object but I do not fill like showing it. Stringily will convert it to string and even IE will show it's contents — masimplo, Oct 05 '15 at 19:45
@mxa055 - I just tried that, and it didnt worked (my console output: {"user":"[object Object]"}). — uksz, Oct 05 '15 at 19:48
thanks @uksz - and do you want to pass the param using `ui-sref` rather than using `$state.go` in the controller? — br3w5, Oct 05 '15 at 19:50
@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, Oct 05 '15 at 19:52
@br3w5 just added the data structure. I've actually just tried the $state.go approach with $state.go('profile', {user: data}) ; but got the same result with "[object Object]". — uksz, Oct 05 '15 at 19:57
I didn't mentioned that the data variable comes from the ng-repeat list. So data comes from ng-repeat = "data in list", and each object in list has the data structure of the one I've described — uksz, Oct 05 '15 at 19:58
Ok, I solved it with a little trick. Dont know what is the real answer to my question though. So far I use: $scope.goToProfile= function(data){ var object = data; $state.go('profile', {user: object}) ; }; and ng-click="goToProfile(data)" — uksz, Oct 05 '15 at 20:08
You may want to rethink your routing because if someone tries to access the profile state via the url, it most definitely will not work. Passing an object as a parameter is fine, but not so much when that parameter also appears in the url. — Anid Monsur, Oct 06 '15 at 06:37

score 0 · Answer 1 · edited May 23 '17 at 10:28

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 '17 at 10:28

Community

1
1

answered Oct 05 '15 at 19:58

masimplo

3,674
2
30
47

Trying that, will let you know in a sec – uksz Oct 05 '15 at 19:59
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 – uksz Oct 05 '15 at 20:09

Passing an object in Angular ui router - stateParam

1 Answers1