I am developing an application with Firebase (1.0) and Angular (1.4). The problem I\'m having is to ensure the data in view are synchronised with Firebase, while fetching denorm
I realize this is an old question but I thought I share my solution for those who are still googling.
Like Brandon mentions you shouldn't have the auther as an object, just and ID (reference)
Your data should look like this:
{
books: {
JyDpkQrUozE3L7flpo: {
title: "title1",
authorId: JyDpkQrUozE3L7fl1x
},
JyDpkQrUozE3L7flp1: {
title: "title2",
authorId: JyDptrrrezE3L7flKx
},
JyDpkQrUozE3L7flp2: {
title: "title3",
authorId: JyDpkQrUozE3L7f222
}
},
authors: {
JyDpkQrUozE3L7flKx: {
firstname: "jacques",
lastname: "smith"
},
JyDptrrrezE3L7flKx: {
firstname: "bill",
lastname: "halley"
},
JyDpkQrUozE3L7f222: {
firstname: "john",
lastname: "ford"
}
}
}
Note that I changed the author to authorId to be more explicit what is a authoer object and what is just the id. Now lets get all the books and the author.
app.factory('BooksWithAuthor', function($firebaseArray, $firebaseObject) {
const books = firebase.database().ref('books')
const authors = firebase.database().ref('authors');
const bookList = $firebaseArray.$extend({
$$added: function(snap) {
const book = $firebaseArray.prototype.$$added.call(this, snap);
book.author = $firebaseObject(authors.child(book.authorId));
return record;
}
});
return new bookList(books)
});
app.controller('BookCtrl, function(BooksWithAuthor) {
$scope.BookList = BooksWithAuthor;
});
And then in your HTML just do
{{ book.title }} was written by {{ book.author.firstname }} {{ book.author.lastname }}