CODEWITHSUNDEEP
angularjsfirebaseangularfire
nazreen
nazreen

Reputation: 2097

Firebase AngularFire error - getting an empty array

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?

Upvotes: 0

Views: 297

Answers (1)

nazreen
nazreen

Reputation: 2097

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.

Upvotes: 1

Related Questions