current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

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})  ;
        };
share|improve this question
    
Can you post what you have tried? – ewahner Oct 5 '15 at 19:37
    
Added more details – uksz Oct 5 '15 at 19:38
    
How are you logging it? – masimakopoulos Oct 5 '15 at 19:42
    
what is the value of user.data? is it an object? – br3w5 Oct 5 '15 at 19:42
1  
@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. – masimakopoulos Oct 5 '15 at 19:52
up vote 0 down vote

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>
share|improve this answer
    
Trying that, will let you know in a sec – uksz Oct 5 '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 5 '15 at 20:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.