Showing data from firebase in angularjs

Question

I am having problems showing my data from controller to view in ionic angularjs this is my code

alkitab.html

 <ion-view view-title="Alkitab ">
    <ion-content class='has-header' style="padding:2%;" ng-init="loadbiblelist();">
        <ion-list>


            <div ng-repeat= "data in alkitabdate" style="margin:0 auto; text-align:center; ">
           <h4>{{data.tanggal}}</h4>
           <br>
            <h4>{{data.alkitabs.judulPasal}}</h4>
            <br>
            <div class="isialkitab" style="line-height:2em; font-size:18px; font-family:Roboto; text-align: justify; -moz-text-align-last: center; text-align-last: left;">
                {{data.alkitabs.isi}}
            </div>

            </div>
        </ion-list>
         <button class="button-balanced button-block large-button ion-thumbsup" ng-click="submit()"><h4>Saya Sudah Baca Alkitab</h4></button>
    </ion-content>
   </ion-view>

Controller.js

.controller('AlkitabCtrl', ['$scope', '$rootScope', '$timeout', '$state', '$stateParams', 'Alkitabdetail', function($scope, $rootScope, $timeout, $state, $stateParams, Alkitabdetail) {
    var rootRef = new Firebase('https://ayobacaalkitab.firebaseio.com/');
    var childAlkitab = rootRef.child('alkitab');
    var alkitabId = $stateParams.alkitabId;
    console.log(alkitabId);   
    var bibleidurl = childAlkitab.child(alkitabId);

    $scope.loadbiblelist = function() {

    bibleidurl.on('value', function(snapshot){
      $timeout(function(){

      var snapshotVal = snapshot.val();

      $scope.alkitabdate=snapshotVal;
      console.log($scope.alkitabdate);

      });
    });
  }


}])

the problem is in console.log($scope.alkitabdate) i can see the result from firebase but it not showing when i try it using ionic serve.

any help appreciated. Thanks.

is it an array that you get from firebase? show us the result — Sajeetharan
– Sajeetharan, Commented Sep 7, 2016 at 1:28

Sajeetharan · Accepted Answer · 2016-09-07 01:53:47Z

1

The problem here is returning result is an object not an array, so you cannot use ng-repeat over an object, what you can do is,

<div style="margin:0 auto; text-align:center; ">
<h4>{{alkitabdate.tanggal}}</h4>
<br>
 <h4>{{alkitabdate.alkitabs.judulPasal}}</h4>
 <br>
 <div class="isialkitab" style="line-height:2em; font-size:18px; font-family:Roboto; text-align: justify; -moz-text-align-last: center; text-align-last: left;">
 {{alkitabdate.alkitabs.isi}}
 </div>

if your result contains more than one object(i.e array) the code which you have should work.

answered Sep 7, 2016 at 1:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Showing data from firebase in angularjs

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