Get both the parent and child values in Firebase Database with AngularJS

Question

I am using some AngularJS to retrieve values in my Firebase Database under a specified parent tree. I would like to get also the value of this parent.

My database structure:

So far, my code gets the Name and PhotoUrl of each tripID under a specified UserID. But I would like to get the TripID value as well as the Name and PhotoUrl. The problem is that the TripID value is not in the child tree. How can I retrieve it ?

My JS looks like this:

    var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {
    var database = firebase.database();
    database.ref(`trips/${userid}/trips`).once('value') 

.then(photosSnap => {
    var photosObj = photosSnap.val();
    var tripName = Object.keys(photosObj).map(key => photosObj[key].name);
    var tripPhotoUrl = Object.keys(photosObj).map(key => photosObj[key].photourl);

   $scope.repeatData = tripName.map(function (value, index) {
      return {
        data: value,
        value: tripPhotoUrl[index]
}
});

Frank van Puffelen · Accepted Answer · 2017-07-22 15:05:06Z

1

Not sure if I understand correctly, but if you want a list of the trip keys:

var tripKeys = Object.keys(photosObj);

But extracting the separate values into arrays and then recomposing feels overly complex to me. You can just loop over the trips once to get all the data you need:

var trips = photosSnap.val();
$scope.repeatData = Object.keys(trips).map((key) => {
    tripKey: key,
    tripName: trips[key].name,
    tripPhotoUrl: trips[key].photourl
});

Or without needing Object.keys():

var trips = [];
photosSnap.forEach((trip) => {
  trips.push({
    tripKey: trip.key,
    tripName: trip.val().name,
    tripPhotoUrl: trip.val().photourl
  });
});
$scope.repeatData = trips;

The last bit unfortunately requires a temporary variable, since Firebase's DataSnapshot class doesn't have a map() function.

answered Jul 22, 2017 at 15:05

Frank van Puffelen

603k85 gold badges895 silver badges868 bronze badges

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

7 Comments

marcvander Over a year ago

Thanks for the answer. In your second code snippet with Object.keys(), are my values stored in tripKey, tripName and tripPhotoUrl ? Because in my code above, in the html, I set ng-repeat="data in repeatData", and I used {{data.data}} and {{data.value}} to show the output.

Frank van Puffelen Over a year ago

I used more descriptive names in my code in hopes it would be clearer. You'd use {{data.tripKey}} in your code to get the trip key, {{data.tripName}} for the trip's name, and {{data.tripPhotoUrl}} for the trip's photo URL.

marcvander Over a year ago

That's what I thought, though when inserting this in my HTML code, nothing shows when I run the code. <div class="main" ng-app="test" ng-controller="MainCtrl"> <div id="usertripinfo" ng-repeat="data in repeatData" style="background-image: url({{data.tripPhotoUrl}}); height: 300px; width: 600px;" href=""> {{data.tripName}} </div> </div> Here is a jsfiddle with the code : jsfiddle.net/vnm1fnjh

marcvander Over a year ago

You will notice that I on purpose didn't include my firebase credentials, and that the userid variable which is used to access the trips in the database is missing as well. When I run it on my computer with all these info, I get the same result as on the jsfiddle

Frank van Puffelen Over a year ago

I can't get the code to run, which makes it hard to help. I've included a database URL in this fiddle and gave you write access to /45254134. Let me know if you can reproduce it with that.

|

Collectives™ on Stack Overflow

Get both the parent and child values in Firebase Database with AngularJS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related