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 the result.

http://jsfiddle.net/K2GsS/12/

What I want to do is get the current properties and values. In this example what I would hope to see is

{ firstName: 'Frank', lastName: 'Williams' }

Is there a better way to get at that data in JSon form (ie not using scope)? Obviously I could hand roll a method that takes the values and pushes out a JSon representation but as the controller changes so too would that function so I would rather just call a toJson type method. Anyone know of the proper way to do this? Thanks in advance.

pkozlowski.opensource · Accepted Answer · 2012-11-26 19:50:45Z

68

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.

edited Nov 26, 2012 at 19:50

answered Aug 5, 2012 at 19:34

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

Comments

deeps · Accepted Answer · 2016-12-06 03:55:47Z

1

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/

answered Dec 6, 2016 at 3:55

deeps

4914 silver badges12 bronze badges

Comments

Stefan Rein · Accepted Answer · 2016-12-06 04:58:26Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related