I'm working on an app that pulls data from a Firebase database, but I'm running into an issue. When I try to loop through the data and display it on the page, nothing shows up. However, if I use console.log to output the data, it's all there!
I suspect this has something to do with an HTTP method and its promise, but I can't seem to figure out how to resolve it. Can someone please help me shed some light on this?
HTML:
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="profile in profiles">
<td>{{profile.value.id}}</td>
<td>{{profile.value.name}}</td>
<td>{{profile.value.description}}</td>
<td>{{profile.value.price | currency}}</td>
<td>
<button type="button" class="btn">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
Controller.js
App.controller("adminController", function($scope) {
console.log("running");
var profiles = new Array;
var query = firebase.database().ref("profiles").orderByKey();
query.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
profiles.push({
key: key,
value: JSON.parse(childData)
})
});
console.log(profiles);
});
}