CODEWITHSUNDEEP
firebasefirebase-realtime-databaseangularfire
Isuru
Isuru

Reputation: 3958

AngularFire doesn't show data from Firebase Database

I'm following this video. But I have trouble implementing it. This is the HTML file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome to Firebase Hosting</title>        
        <!-- AngularJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

        <!-- AngularFire -->
        <script src="https://cdn.firebase.com/libs/angularfire/2.0.2/angularfire.min.js"></script>

        <!-- Firebase -->
        <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>        

        <script src="app.js"></script>
  </head>
  <body ng-app="app">
    <div id="message" ng-controller="MyController as ctrl">
      <pre>
{{ ctrl.object | json }}
          </pre>
    </div>
  </body>
</html>

And my app.js file is this.

(function(){

        // Initialize Firebase
        var config = {
                apiKey: "SOME KEY",
                authDomain: "tier2list.firebaseapp.com",
                databaseURL: "https://tier2list.firebaseio.com",
                storageBucket: "",
        };
        firebase.initializeApp(config);

        angular.module('app', ['firebase']).controller('MyController', function($firebaseObject){
                const rootRef = firebase.database().ref().child('tier2list');
                const ref = rootRef.child('object');
                this.object = $firebaseObject(ref);
        });

}());

This is my database structure. enter image description here

But the result is as follows.

enter image description here

And there is no errors in the console as well. Database rules are as follows.

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Upvotes: 2

Views: 861

Answers (2)

Luke Schlangen
Luke Schlangen

Reputation: 3882

I was in the middle of this when Frank answered. He has the right answer, but here is what your database should look like in order to work with David's code: enter image description here

In his walk through, he is already inside of the angular node, so that could be a little confusing.

I also created a Github repo for the project in case anyone is having trouble making it for themselves: https://github.com/LukeSchlangen/angularFireQuickDemo

Upvotes: 1

Frank van Puffelen
Frank van Puffelen

Reputation: 598847

The problem is in the path you synchronize:

const rootRef = firebase.database().ref().child('tier2list');

There is no child tier2list in your database, so you will get an empty object.

Instead, you're trying to synchronize the entire database, which you can do by:

const rootRef = firebase.database().ref()

Upvotes: 2

Related Questions