AngularJS Web application development Cookbook

Debugging using the json filter

AngularJS provides you with a JSON conversion tool, the json filter, to serialize JavaScript objects into prettified JSON code. This filter isn't so much in use for production applications as it is used for real-time inspection of your scope objects.

Getting ready…

Suppose your controller is set up as follows with a prefilled user data object:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.user = {
    id: 123,
    name: {
      first: 'Jake',
      last: 'Hsu'
    },
    username: 'papatango',
    friendIds: [5, 13, 3, 1, 2, 8, 21], 
    // properties prefixed with $$ will be excluded
    $$no_show: 'Hide me!'
  };
});

How to do it…

Your user object can be serialized in the template, as follows:

(index.html) <div ng-app="myApp"> ...