Angularjs Firebase getting a list of data

Question

I am trying to get data from Firebase. I do practices to learn Firebase better and my app is like a message app.

My problem is, that I try to get these message data, but because they have a unique id, I can't reach them. How can I reach messagecontents,dates?

Here is my database structure:

angularish
    -> <id>
        -> "sender" : "john"
        -> "to" : "sarah"
        -> "date" : "16/09/2016"
        -> "messageContent" : "Something like a long text..."
    -> <id>
        -> "sender" : "john"
        -> "to" : "sarah"
        -> "date" : "16/09/2016"
        -> "messageContent" : "Something like a long text..."
    -> <id>
        -> "sender" : "john"
        -> "to" : "sarah"
        -> "date" : "16/09/2016"
        -> "messageContent" : "Something like a long text..."

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test3 Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-database.js"></script>
    <!-- Leave out Storage -->
    <!-- <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-storage.js"></script> -->
    <script>
      // Initialize Firebase
      firebase.initializeApp(config);
    </script>
    <script>
        var app2 = angular.module("theapp",[]);
        app2.controller("generalController",function($scope){

          var database = firebase.database();
          var rootRef = database.ref();
          var subRootRef = rootRef.child("angularish");
          $scope.messages = [];

          rootRef.push({
                "sender":"y",
                "to" : "x",
                "messageContent" : "Something like a long text",
                "date" : "10/06/2016"
          });

          rootRef.on("value",function(snapshot){
            $scope.messages = snapshot.val();
            console.log(snapshot.val());
          });
        });
    </script>
</head>
<body>
    <div class="container" ng-app="theapp" ng-controller="generalController">
        {{ 1+1 }}
        <ul>
            <li ng-repeat="message in messages">
                {{ message.messageContent }}
            </li>
        </ul>
    </div>
</body>
</html>

i tried to use it but again i couldn't :( How can i do that in angularfire — m.a.a.
– m.a.a., Commented Sep 29, 2016 at 16:52
You can use startAt and endAt firebase.google.com/docs/database/web/… Heres an example jsfiddle.net/katowulf/vQEmt/2 — Fowotade Babajide
– Fowotade Babajide, Commented Sep 29, 2016 at 21:52

Mathew Berg · Accepted Answer · 2016-10-07 14:52:54Z

2

You're missing a $scope.$apply() since you did your get outside of the angular digest cycle.

rootRef.on("value",function(snapshot){
    $scope.messages = snapshot.val();
    console.log(snapshot.val());
    $scope.$apply();
});

answered Oct 7, 2016 at 14:52

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

2 Comments

cartant Over a year ago

Won't the result from val() need to be converted into an array, too? To work with ng-repeat?

Mathew Berg Over a year ago

ng-repeat works with objects. If they want to sort it then yes, they will have to convert it to an array. Example: jsfiddle.net/kk8gyjt1

Collectives™ on Stack Overflow

Angularjs Firebase getting a list of data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related