How can I bind an array of returned Firebase elements to my AngularJS view (via a controller)?

Question

My HTML is

  <tbody>
    <tr ng-repeat="question in questions">
      <td>
        <a ui-sref="englishDetail({id: question.id})">
          {{ question.id }}
        </a>
      </td>
      <td>{{ question.instruction }}</td>
      <td>{{ question.questionText }}</td>
      <td>{{ question.level }}</td>
      <td>
        <a ui-sref="passageDetail({id: question.passageId})">
          {{ question.passageId }}
        </a>
      </td>
    </tr>
  </tbody>

In my controller, I have

var fbase;

$scope.questions = [];

fbase = new Firebase("https://my.firebaseio.com");

fbase.child("questions").orderByChild("subject").equalTo("english").once("value", function(questionsSnapshot) {
  $scope.questions = [];
  questionsSnapshot.forEach(function(questionSnapshot) {
    $scope.questions.push({
      id: questionSnapshot.key(),
      instruction: questionSnapshot.val().instruction,
      questionText: questionSnapshot.val().questionText,
      level: questionSnapshot.val().level,
      passageId: questionSnapshot.val().passageId
    });
  });
  return $scope.$apply();
});

It somehow seems unnecessary to have to iterate over the returned object to achieve what I am trying to do. Is there a better / more native way of doing this? I've looked into the supposed three way data binding on the Firebase doc site but that doesn't show how to do it if you are filtering objects.

David East · Accepted Answer · 2015-12-21 22:28:41Z

3

Use AngularFire for synchronized collections.

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController);

function MyController($scope, rootRef, $firebaseArray) {
  var ref = rootRef.child('questions');
  // handles $digest loop and synchronizing to an array
  $scope.questions = $firebaseArray(ref);
}

edited Dec 21, 2015 at 22:28

answered Dec 21, 2015 at 16:16

David East

32.7k6 gold badges70 silver badges83 bronze badges

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

2 Comments

Shamoon Over a year ago

Can I use this with filtering as well?

David East Over a year ago

Yep. Just make a query from the ref and pass it into the $firebaseArray.

Collectives™ on Stack Overflow

How can I bind an array of returned Firebase elements to my AngularJS view (via a controller)?

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