Joining AngularFire paths on a value/key is not working (merging user profiles into records)

前端 未结 3 1236
长发绾君心
长发绾君心 2021-01-25 02:10

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

3条回答
  •  自闭症患者
    2021-01-25 02:49

    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 }}

提交回复
热议问题