How does toJSON in $firebaseObject work? - angularjs

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": "kato#firebase.com",
"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:
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.
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.