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
Of course it' empty if your model is empty. Where is your model to feed the products from? — Endre Simo
You seem to be doing everything correctly. Are you sure that you imported the data successfully? — Kazimieras
@Kazimieras I figured it out! thanks man. going to answer my queston now. — nxmohamad

nxmohamad nxmohamad · Accepted Answer · 2016-06-08T11:54:10

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.

Firebase AngularFire error - getting an empty array

1 Answers