How to use angular.toJson on a angular controller or scope

Question

Please see my following jsFiddle example where I am trying to push an Angular.js object into a JSon representations using angular.toJson. What I get is just \"$SCOPE\" as th

Answer 1

I can see that you are coming from the jQuery world, but with angular.js things are getting much simpler, please check this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

With angular.js you can attach events much, much simpler:

 <input type="button" ng-click="showJson()" value="Object To JSON" />

and then in your controller:

 $scope.showJson = function() {
    $scope.json = angular.toJson($scope.user);
}

In fact this could be done even easier with angular.js filters, check this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ which has:

{{user | json}}

With angular.js you need to "unlearn" a bit some of the jQuery habits, but this is good since things get much, much easier most of the time.

Answer 2

You can either use angular built in json filter as

{{ user | json }}

where user is the Json object to be stringfied OR use angular.toJson to convert it to JSON-formatted string. Please refer to my fiddle https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

Since you asked how to get this without the $scope, here is an angular 1.5.9 example with components (they were introduced in angular 1.5.8).

This would allow you to migrate easier to angular 2, too. And of course you would separate all this sources into separate files.

You should give TypeScript a try. This would get you Type Safety and a lot of sugar syntax and a easier way to programming in an oriented way. Also you could see where a method is defined and what methods and properties it has.

var module = angular.module("settingsApp", []);

module.service("userSettingsService", UserSettingsService);

module.component("userDetails", {
        template: `
        	<input ng-model="$ctrl.userDetail.firstName" />
            <input ng-model="$ctrl.userDetail.lastName" />
            <input type="button" ng-click="$ctrl.showJson()" value="to JSON" />
            <hr/>  
            {{$ctrl.json}}`,
      	controller: UserDetailsController
    });

UserSettingsService.$inject = ["$q"];
function UserSettingsService($q) {
	var _this = this;
	this.$q = $q;
	this.userDetails = [{
        firstName: "Frank",
        lastName: "Williams"
    }];
	this.getSettings = function (id) {
    	return _this.$q.resolve(this.userDetails[id]);
    }
}

UserDetailsController.$inject = ["userSettingsService"];
function UserDetailsController(userSettingsService) {
	var _this = this;
	var userId = 0;
	
    this.userSettingsService = userSettingsService;
    userSettingsService.getSettings(userId).then(function (data) {
    	_this.userDetail = data;
    });
}

UserDetailsController.prototype.showJson = function() {
    this.json = angular.toJson(this.userDetail);
}


angular.bootstrap(document, ['settingsApp']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>

<user-details></user-details>