Tips for showcasing information of a particular child in a database

Question

Tips for showcasing information of a particular child in a database

I am currently immersed in a project that involves Cloud 9 and Ionic, with a Firebase database at its core. My main challenge lies in referencing the specific details of a particular vehicle (as per the database layout) and then displaying this information on a webpage.

{
  "userProfile" : {
    "fjN6auulwkguoB4SsUKyiKXZzNx1" : {
          "birthday" : "1997-06-12",
          "drivers" : {
              "-KqbyzU_KKYtpmewoDza" : "Test"
         },
          "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee848f9d8180ae9a8b9d9ac08d8183">[email protected]</a>",
          "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"
             }
        }

Essentially, each user has a unique key assigned by the database, containing attributes such as email and birthday. The objective is to identify the current logged-in user to access their unique key, followed by displaying all vehicles associated with that user. Clicking on a specific car should lead to a new page showcasing detailed information about the selected vehicle. I'm facing difficulties in referencing the vehicle key and passing those specifics to the respective page. The code snippet below from "client-profile.ts" allows me to display user details:

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
    })
}

The related code from "auth.ts" is provided below:

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 assistance or guidance would be greatly appreciated!

typescript firebase-realtime-database ionic2 angularfire2 cloud9

Answer 1

Answer №1

This solution will generate an array of vehicles within the userProfile property that can be utilized in your view.

In order to create a database reference, you will need the uid, which can be obtained by returning it from your AuthProvider:

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

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

While this method may appear more complex than your current setup, the nested structure is necessary to ensure all data is captured. If preferred, you can perform the above actions within your AuthProvider and return a promise to your ClientProfilePage instead of placing it directly in the view's code logic.

By leveraging the vehicle array, you can iterate through and pass relevant information to another page.

Answer 2

This solution will generate an array of vehicles within the userProfile property that can be utilized in your view.

In order to create a database reference, you will need the uid, which can be obtained by returning it from your AuthProvider:

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

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

While this method may appear more complex than your current setup, the nested structure is necessary to ensure all data is captured. If preferred, you can perform the above actions within your AuthProvider and return a promise to your ClientProfilePage instead of placing it directly in the view's code logic.

By leveraging the vehicle array, you can iterate through and pass relevant information to another page.

Tips for showcasing information of a particular child in a database

Answer №1

Similar questions

When attempting to create a table in BigQuery, the operation may fail if the JSON key includes a

What is the reason for the inability to import a router for express in TypeScript?

Issue with modal-embedded React text input not functioning properly

What is the best way to asynchronously refresh Angular 2 (or 4) PrimeNg Charts?

Understanding how to efficiently map through FontAwesome icons using React TypeScript and effectively showcase them on the frontend

How can TypeScript associate enums with union types and determine the type of the returned object property?

Unable to reinitialize the DataTable using Angular Datatable

Issue encountered while presenting canvas on HTML due to Firebase information

Exploring depths with Typescript recursion

React throwing an error when trying to use inline fontWeight styling with Typescript

Issue: The client assertion could not be signed due to the absence of client JWKs for Zitadel and OpenID Client integration

Tips for implementing Material-UI components in a .ts file

Getting around using Material-UI Icons

How can I add a new property to an object type within an Interface in TypeScript?

Updating the text area value based on the selected option in a dropdown using Typescript within Angular6

The various types of Angular 2 FormBuilders

Is it possible to export an imported merged namespace in Typescript?

Strategies for retaining a list of chosen localStorage values in Angular6 even after a page refresh

Errors in Compiling Dependencies for d3.js Using Typescript

What is the best way to share a configuration value retrieved from the back end across all components of an Angular 6 application?