Firebase AngularFire error - getting an empty array

Question

I'm following the tutorial here - https://www.youtube.com/watch?v=yjy8AYoo-NE It's a step by step guide using AngularJS, AngularFire and Firebase.

I'm setting up the files just like how he did, and at the point where he loads data from the Firebase storage (timestamp 6:25 in the video) is where my code stops working.

The following is my app.js and index.html:

var myApp = angular.module('myApp', ['firebase']);

myApp.controller('ProductsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {

    alert("ping!");
    
    var myProducts = new Firebase('https://ng-academy.firebaseio.com/products');

    $scope.products = $firebaseArray(myProducts);


}]);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>NG-Academy ::: AngularFire Products</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/angular.js"></script>
    
    <!-- Firebase -->
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

    <script src="js/app.js"></script>

</head>
<body ng-app="myApp">
<div class="panel panel-primary" ng-controller="ProductsCtrl">
    <div class="panel-heading" style="font-size:large">
        Product Listttt
    </div>
    <form ng-submit="addFormSubmit()" ng-show="addFormShow">
        <input type="text" ng-model="productName" placeholder="Name" />
        <input type="text" ng-model="productCode" placeholder="Code" />
        <input type="text" ng-model="description" placeholder="Description" />
        <input type="text" ng-model="price" placeholder="Price" />
        <input type="submit" value="Add Product" class="btn btn-default btn-success" />
    </form>

    <form ng-submit="editFormSubmit()" ng-show="editFormShow">
        <input type="text" ng-model="productName" placeholder="Name" />
        <input type="text" ng-model="productCode" placeholder="Code" />
        <input type="text" ng-model="description" placeholder="Description" />
        <input type="text" ng-model="price" placeholder="Price" />
        <input type="submit" value="Edit Product" class="btn btn-default btn-warning" />
    </form>
    <div class="panel panel-body">
        <table class="table">
            <thead>
            <tr>
                <td>Product</td>
                <td>Code</td>
                <td>Description</td>
                <td>Price</td>
                <td>Actions</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="product in products">
                <td>{{ product.productName}}</td>
                <td>{{ product.productCode }}</td>
                <td>{{ product.description }}</td>
                <td>{{ product.price | currency }}</td>
                <td>
                    <button class="btn btn-primary" ng-click="showProduct(product)" >Edit</button>&nbsp;
                    <button class="btn btn-danger" ng-click="deleteProduct(product)" >Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-success" ng-click="showForm()" ng-hide="addFormShow">+</button>
        <button class="btn btn-warning" ng-click="hideForm()" ng-show="addFormShow">-</button>
    </div>
    {{products}}
</div>


<!-- <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script> -->
<script>
  // Initialize Firebase
  //REMOVED for security purposes
  //I have this on my version
</script>

</body>
</html>

My list of Products is empty. When I bind {{products}} into the view, I get an empty array like []

What am I doing wrong?

try to show your products only if your products array length greater than zero.. add div with ng-show and place {{products}} inside that.. ng-show boolean only true if $scope.products.length > 0 — AB Udhay
– AB Udhay, Commented Jun 8, 2016 at 11:40
Of course it' empty if your model is empty. Where is your model to feed the products from? — Endre Simo
– Endre Simo, Commented Jun 8, 2016 at 11:41
You seem to be doing everything correctly. Are you sure that you imported the data successfully? — Kazimieras
– Kazimieras, Commented Jun 8, 2016 at 11:41
@Kazimieras I figured it out! thanks man. going to answer my queston now. — nazreen
– nazreen, Commented Jun 8, 2016 at 11:51

nazreen · Accepted Answer · 2016-06-08 11:54:10Z

1

so silly me. all it was, was database permissions. since I'm just testing my app, I can make the read and write permissions public, for the database. but by default, firebase requrires 'authentication'. users need to be signed in through any of the various methods (google sign in, facebook, etc)

All I had to do was change the database rules from

 {
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

to

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

thanks guys for the fast response! I've actually been on this for 3 days.

answered Jun 8, 2016 at 11:54

nazreen

2,1282 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Firebase AngularFire error - getting an empty array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related