Pavan S Pavan S - 3 months ago 10
AngularJS Question

Print the JSON in angular js, I can see in console, but not able to print the same

I am missing something very simple.

In my controller I am getting the JSON object.

app.controller("dashboardCtrl", ["$scope","authFactory","$location", function($scope,authFactory,$location){
var userObj = authFactory.getUserObj(userObj);
console.log(userObj);
$scope.userObj = userObj;

var accessToken = authFactory.getAccessToken();
console.log(accessToken);
$scope.accessToken = accessToken;

$scope.FBout = function(){
FB.logout(function(response) {
authFactory.clearCookie();
$location.path("/");
$scope.$apply();
});
};
}]);


In the console, I get the response as follows

{"name":"Pavan Sudheendra","id":"539193599614696"}


The factory code for the same is as shown below:

app.factory("authFactory",["$cookies","$location",function($cookies,$location){
var authFactory = {};

authFactory.setAccessToken = function(accessToken){
$cookies.put("accessToken",accessToken);
}

authFactory.getAccessToken = function(){
return $cookies.get("accessToken");
}

authFactory.getUserObj = function(){
var userObj = $cookies.get('userObj');

if(userObj){
return userObj;
}
else {
console.log("error");
}
}

authFactory.clearCookie = function(){
$cookies.remove("accessToken");
$cookies.remove("userObj");
}

authFactory.isAuthenticated = function(){
var isLoggedIn=$cookies.get("accessToken")?true:false;
return isLoggedIn;
}

return authFactory;
}]);


but I am trying to use that object, to print it in the front end. Like

<h1> this is dashboard {{accessToken}} {{userObj.name}} </h1>


I am sure I have included every controller and linked the factory to it, and the thing is I am able to print the accesstoken. However I can't print the name and id of it.

If I try to print
{{userObj}}
, the whole object will be printed. then if I try
{{userObj.name}}
then I should get the name value of that user object, right?

Answer

As discussed in the comments, your cookie stores a string, not an object. You can get an object back from your JSON string using the angular.fromJson method.

$scope.userObj = angular.fromJson(userObj)

You could potentially simplify things further by using the $cookies service's getObject and putObject methods, letting Angular serialize and deserialize the object in the background.

Comments