JSFiddle - React, Tailwind, and code Playground

by scferg

HTML

<script src="https://cdn.firebase.com/js/client/2.2.5/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>
<div ng-app="BooksApp">
    
    <div ng-controller="BooksCtrl">
        
        <ul>
            
            <li ng-repeat="book in books">
                <em>{{book.title}}</em> by {{getAuthorName(book.author)}}.<br /><small>Published in {{book.publishDate}}.</small></li>
            
        </ul>
        
    </div>
    
</div>

JavaScript

var app = angular.module("BooksApp", ["firebase"]);

app.controller("BooksCtrl", function($scope, $firebaseArray, $q){
    var fburl = "https://dev-2490.firebaseio.com";
    var booksRef = new Firebase(fburl + "/books");
    var books = $firebaseArray(booksRef);
    $scope.books = books;
    
    $scope.getAuthorName = function(authorId){
        var deferred = $q.defer();
        var authorRef = new Firebase(fburl + "/authors/" + authorId);
        
        authorRef.on("value", function(data){
            // Loaded author's data
            var authorName = data.val().name;
            console.log(authorName);
            deferred.resolve(authorName);
        });
        
        return deferred.promise;
    };
});