Samuel Billy Samuel Billy - 3 months ago 6
AngularJS Question

Showing data from firebase in angularjs

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.

enter image description here

any help appreciated.
Thanks.

Answer

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.