How to display details for specific database child

Question

I'm busy doing a project using Cloud 9 and Ionic, using a Firebase database. The issue I'm having is referencing the details of a specific vehicle (see database layout) and displaying that info on a page.

{
  "userProfile" : {
    "fjN6auulwkguoB4SsUKyiKXZzNx1" : {
          "birthday" : "1997-06-12",
          "drivers" : {
              "-KqbyzU_KKYtpmewoDza" : "Test"
         },
          "email" : "jason@test.com",
          "licenseNum" : "1234",
          "name" : "Tester",
          "password" : "123456",
          "surname" : "Test",
          "vehicles" : {
              "-Kqbywf6e8VkojtLTUyi" : {
                 "location" : "Stellenbosch",
                 "make" : "Mercedes-Benz",
                  "mileage" : "123",
                  "model" : "SLK",
                  "year" : "2017"
             },
                 "-Kqc-yYdd5DKnodnAWe6" : {
                  "location" : "ste",
                 "make" : "BMW",
                  "mileage" : "123124",
                "model" : "dfg",
                "year" : "2016"
             },
        }

So basically a user has a unique key, generated by the database, with attributes like email birthday etc. The goal here is to reference the current user logged in to access their unique key, then display all the cars that user has. Once a specific car has been clicked, it should take you to a new page with details on the car clicked. I'm struggling with how to reference the vehicle key and pass those details to page. Managed to display user details using this code in "client-profile.ts":

export class ClientProfilePage {
  private userPhotoUrl:any;
  private userDisplayEmail : any;
  private userDisplaysName : any;
  private userDisplayName : any;
  private userDisplayBirth : any;
  private userDisplayLicense : any;

  constructor(public navCtrl: NavController, private AuthProvider: AuthProvider) { 

    var myUserid= firebase.auth().currentUser.uid; //current user id
    this.displayUser(myUserid);

  }

  displayUser(theUserId){

    var that = this;

    this.AuthProvider.viewUser(theUserId).then(snapshot => {



       that.userDisplayEmail= snapshot.val().email;
       that.userDisplayName= snapshot.val().name;
       that.userDisplaysName= snapshot.val().surname;
       that.userDisplayBirth= snapshot.val().birthday;
       that.userDisplayLicense= snapshot.val().licenseNum
    })
}

And then the "auth.ts":

export class AuthProvider {

  public fireAuth:firebase.auth.Auth;
  public userProfileRef:firebase.database.Reference;  
  public userProfile:firebase.database.Reference;  

  constructor(public http: Http) {
    this.fireAuth = firebase.auth();
    this.userProfileRef = firebase.database().ref('/userProfile');   

  }



  loginUser(email: '', password: ''): firebase.Promise<any>{
    return this.fireAuth.signInWithEmailAndPassword(email, password);
  }

  viewUser(userId: any){
            var userRef = this.userProfileRef.child(userId);
            return userRef.once('value'); 
}

Any sort of help would be appreciated!

checked out my answer below yet? – nclarx Sep 23 '17 at 08:57 — nclarx, Sep 23 '17 at 08:57

nclarx · Answer 1 · 2017-08-04T12:32:41.807

This solution should give you a nice array containing vehicles as a property of the userProfile that you can use in your view.

You will need to get the uid to create the database reference - you could simply return the uid from your AuthProvider:

let ref = firebase.database().ref('userProfile/' + uid);
const promise = new Promise((resolve, reject) => {
  ref.once('value') // Get the user profile
    .then((userProfile) => {
      ref.child('vehicles') // Get the vehicles
        .once('value')
        .then((vehicles) => {
          var vehicleArray = [];
          vehicles.forEach(vehicle => { // Loop through vehicles and push to array
            vehicleArray.push(vehicle);
          });
          var userProfileWithVehicles = userProfile.val(); 
          userProfileWithVehicles.vehicles = vehicleArray; // Add array of vehicles to userProfile object
          resolve(userProfileWithVehicles);
        });
    });
});

promise.then(userProfile => {
  console.log(userProfile); // Object to give to the view
});

This is a bit messier than your current setup, but the nesting is required to ensure you have all the data. You could do the above in your AuthProvider and return a promise to your ClientProfilePage if you prefer this to be in the provider rather than the code behind the view.

Using the array of vehicles you can loop through and hand the appropriate information off to another page.

I noticed the angularfire2 tag on this question. I could do this with angularfire2 more easily - let me know if you're interested and I can add that. — nclarx, Aug 04 '17 at 12:48

How to display details for specific database child

1 Answers1