How to display user data in modal - firebase

Question

I am currently working on a project where there are two types of users: Drivers and Passengers. I am using Ionic Framework and Firebase Database ad Authentication. The Passengers are able to send requests to the drivers and the drivers are able to see these requests. I am currently working on the driver home page and creating a platform that lists the passenger's/customer's data and requests. I really want to user ionic modals to keep the information organized but I am unsure on how to go about this. I went ahead and attached the HTML and Javascript files for the Driver Home page and the modal page. Any help is extremely appreciated. This is my first time using Firebase and I am extremely lost.
My Database Structure
Driver Home Page
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ModalController, Modal } from 'ionic-angular';
import { DriverHomePage } from '../driver-home/driver-home';
import { CustomerModalPage } from '../customer-modal/customer-modal';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import * as firebase from 'firebase';
/**
* Generated class for the DriverHomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-driver-home',
templateUrl: 'driver-home.html'
})
export class DriverHomePage {
const custRef = firebase.database().ref().child('User').orderByChild('type').equalTo('customer').once('value', function(snapshot) {
snapshot.forEach(function(child) {
var newCustomer = child.val();
var firstName=child.val().firstName;
var lastName=child.val().lastName;
var phone=child.val().phone;
var location = child.val().location;
var numOfPassengers = child.val().numOfPassengers;
var payment = child.val().payment;
});
});
constructor(private modalCtrl: ModalController, private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams) {
}
openModal(){
//const custData
/* const custModal: Modal = this.modalCtrl.create('CustomerModalPage');
custModal.present();
custModal.onDidDismiss();*/
}
ionViewDidLoad() {
console.log('ionViewDidLoad DriverHomePage');
}
}
<!--
Generated template for the DriverHomePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>driver-home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button (click)"openModal()">{{ custRef.firstName }} {{ custRef.lastName }}</button>
</ion-content>
Modal
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase';
/**
* Generated class for the CustomerModalPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-customer-modal',
templateUrl: 'customer-modal.html',
})
export class CustomerModalPage {
const custRef = firebase.database().ref().child(`User`).orderByChild('type').equalTo('customer').on('value', function(snapshot) {
snapshot.forEach(function(child) {
var datas = child.val();
var firstName=child.val().firstName;
var lastName=child.val().lastName;
var phone=child.val().phone;
var location = child.val().location;
var numOfPassengers = child.val().numOfPassengers;
var payment = child.val().payment;
});
});
constructor(private fb: AngularFire, private viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {
}
acceptRequest(){
}
closeModal() {
this.viewCtrl.dismiss();
}
/*ionViewDidLoad() {
console.log('ionViewDidLoad CustomerModalPage');
}*/
ionViewWillLoad(){
//const data = this.navParams.get('data');
console.log();
}
}
<!--
Generated template for the CustomerModalPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>CustomerModalPage</ion-title>
<ion-buttons end>
<button ion-button (click)="closeModal()">Close</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>{{ custRef.firstName }}</p>
<p>{{ custRef.lastName }}</p>
<p>{{ custRef.phone }}</p>
<p>{{ custRef.location }}</p>
<p>{{ custRef.numOfPassengers }}</p>
<p>{{ custRef.payment }}</p>
<button (click)="acceptRequest()">Accept</button>
</ion-content>

Answer 1

I see you are using firebase library to access your database and I can also see you are importing angularfire2 too. I strongly recommend you use angularfire2 and avoid using firebase library as this is way easier. You can read more in the angularfire2 docs.
For your question, the best query would be something like this:
this.db.list('/user', ref => ref.orderByChild('type').equalTo('customer'))
.subscribe(users => {
users.forEach(user => {
//Do stuff with each user here.
})
});
Also, remember to inject the correct reference in your component. Your constructor should look like this:
constructor(db: AngularFireDatabase) { }