How does toJSON in $firebaseObject work?

Question

I forked a normalization example from Kato's fiddle and updated it to the current version of AngularFire and Firebase, you can see it here. I tested around a bit to get a better understanding of how $firebaseObject and $firebaseArray work and I really get a hang of it.

Except the toJSON from $firebaseObject.

So I have this little code in the controller:

$scope.singlePost = singleMergedPost('post2');
console.log('singlePost', $scope.singlePost);

The output normally is:

{
  "postData": {
    "bla": "blubb",
    "dateCreated": 1397584465,
    "title": "Another cool website",
    "upvotes": 1,
    "url": "http://www.google.com",
    "user": "simplelogin:2"
  },
  "userData": {
    "email": "[email protected]",
    "jobTitle": "Awesome Dude",
    "name": "Kato Richardson"
  }
}

But when I add toJSON to $extend the output is:

{
  "bla": "blubb",
  "dateCreated": 1397584465,
  "title": "Another cool website",
  "upvotes": 1,
  "url": "http://www.google.com",
  "user": "simplelogin:2"
}

$scope.singlePost actually contains the same data, but I am wondering about:

1. Why is toJSON even called here, although I haven't sent back any data to the server (at least it looks like from my point of view) yet.
2. Why does <pre ng-bind="singlePost | json"></pre> only show the postData data?

Answer 1

1. toJSON

• .toJSON() is called to strip the properties and methods of a $firebaseObject or $firebaseArray that start with $ or $$. It serializes the object to valid JSON data.
• This is done to display the data in the <pre> div for debugging, without the $ methods.
• See this answer from Kato.

---

2. Difference in data

• <pre ng-bind="singlePost | json"></pre> only shows the postData because only the postData property of this (the $firebaseObject) is passed to the .toJSON() method in the line $firebaseUtils.toJSON(this.postData);
• Compared to passing the whole object (including postData and userData properties) in console.log('singlePost', $scope.singlePost);
• If you log $scope.singlePost.postData, you should see the same result.