Displaying retrieved firebase data from database in HTML file with Ionic 3

Question

How do I go about displaying the data that I've retrieved from my firebase database? I need to be able to display the data and organize it in the HTML file. As a starter, I want to simply show the customer user's first. I would also like to make this clickable eventually because I plan on putting thin user's data into a modal page. Also, I am not sure as to how this will work when there are multiple users in the database, so if someone could explain that process, it would be much appreciated. I've attached a picture of my database and the Javascript and HTML files. All help is appreciated. Thanks.

My Database Model

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, FirebaseObjectObservable } 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').on('value', function(snapshot) {
    snapshot.forEach(function(child) {
      var data = child.val();
      console.log(data.firstName + ' ' + data.lastName + ' ' + data.location  );
    });
  }, function(error) {
    // The Promise was rejected.
    console.log('Error: ',error);
});

  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>

  <div padding>
    <p>I WANT TO DISPLAY FIRST NAME HERE</p>
  </div>



</ion-content>

This is an ionic question. My 2 cents: stick with vanilla HTML/CSS/JS. Ionic is a framework of a framework (Angular) and certainly will go extinct like all frameworks do e.g. [jQuery]. ...that's just my opinion. Good luck. — Ronnie Smith
– Ronnie Smith, Commented Apr 5, 2018 at 1:48
Do you want to show all users where "type" equal to "customer"? — Sarasa Gunawardhana
– Sarasa Gunawardhana, Commented Apr 5, 2018 at 1:51
@SarasaGunawardhana Yes. The plan is to list all users that have the type of "customer." I want to have each user's name displayed as some sort of item and then have the employee user be able to click on that user and see the modal with that customer's information. — Hailey C.
– Hailey C., Commented Apr 5, 2018 at 2:01

Sarasa Gunawardhana · Accepted Answer · 2018-04-05 15:02:26Z

3

    users = [];

    constructor(private modalCtrl: ModalController, private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams) {

       firebase.database().ref().child(`/user`).orderByChild('type').equalTo('customer').once( "value", ( snapshot )=>{
          let result = snapshot.val(); //snapshot.val() gives key value pairs
          //you can make object array to show data on html using *ngFor
          for(let k in result){
              this.users.push({
                 id : k, //gives key of each object
                 value : result[k] //gives user values
              })
          }
       });
    }

You can use implement the function of modal to show after constructor like this.

opneModal(object){
     var obj = { //edited
        id : object.id , 
        firstname : object.value.firstName, 
        location : object.value.location }
    var modalPage = this.modalCtrl.create('YourModalPage',obj); //edited
    modalPage.onDidDismiss(data => {

    });
    modalPage.present();
}

HTML

    <ion-list *ngFor="let user of users">
        <ion-item (click)="openModal(user)">

          <p>{{user.id}}</p>
          <p>{{user.value.firstName}}</p>
          <p>{{user.value.location}}</p>
        </ion-item>
    </ion-list>

You can get data of single customer from YourModalPage when click the customer using navprams inside constructor of YourModalPage

let user_first_name = navParams.get("firstname"); //edited let location= navParams.get("location"); //edited

How To Create Modal and its behavior

edited Apr 5, 2018 at 15:02

answered Apr 5, 2018 at 2:22

Sarasa Gunawardhana

1,1194 gold badges16 silver badges38 bronze badges

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

4 Comments

Hailey C. Over a year ago

Thank you for your quick response. So far, the solution works on the main home page. However, when I click on the user, I get this error. Please advise me on how to resolve this. Error: Uncaught (in promise): Error: Can't resolve all parameters for CustomerModalPage: (?, [object Object], [object Object], [object Object]). Error: Can't resolve all parameters for CustomerModalPage: (?, [object Object], [object Object], [object Object]).

Sarasa Gunawardhana Over a year ago

I have edited the code where the inside of OpenModal() function. Try to access data like this way let user_first_name = navParams.get("firstname");

Sarasa Gunawardhana Over a year ago

stackoverflow.com/a/38541707/7724032 Error: Can't resolve all parameters for CustomerModalPage Try this one if above commented solution not work for you

Hailey C. Over a year ago

I'm looking at the second possible solution because the edited code did not fix the problem. What would I use instead of paramsId?

Collectives™ on Stack Overflow

Displaying retrieved firebase data from database in HTML file with Ionic 3

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related