Firebase returns data with $ value, $ id and $ priority AngularJs

Question

I am trying to get data from Firebase in my HTML using AngularJS. It works fine, but when I get to the child node, it displays the data in unexpected form. Please find images for details:

Json File I imported to Firebase:

Presentation of FireBase data:

Data returned in HTML:

Expected data as

In my controller, I am trying to get data from FireBase as:

$scope.locService = $rootScope.service; var serviceRef = new Firebase(FIREBASE_URL+"ABC/location/"+$rootScope.location+"/services/"+$rootScope.service+"/"+$rootScope.serviceDetail+""); $scope.details = $firebaseArray(serviceRef); 

$ rootScope values ​​do the right thing because they return data (which are not in the expected format, i.e. with $ id, $ value, $ priority).

In my HTML:

 <div class="content has-header"> <h2>{{details[0]}}</h2> </div> 

Please help me. Thanks in advance for your suggestions.

Answer 1

AngularFire creates a synchronized array from the Firebase DataSnapshots series. Snapshot contains data, as well as other useful data, such as key and priority . AngularFire uses the $ prefix to include this data for each element in the array.

In your case, you are trying to synchronize a series of primitives so that AngularFire provides you with important information such as key , it includes the primitive in the object and gives you access to the primitive value via $value .

Check out the AngularFire docs in meta fields for more information.

If you don't want this behavior, you need to either use $firebaseObject() or go one level into the JSON tree.

In your case, you most likely want to use $firebaseObject() .

 $scope.locService = $rootScope.service; var serviceRef = new Firebase(FIREBASE_URL+"ABC/location/"+$rootScope.location+"/services/"+$rootScope.service+"/"+$rootScope.serviceDetail+""); $scope.details = $firebaseObject(serviceRef);