Ionic 3 - Pulling nested data from a Firebase database


#1

Hello all. First time posting, and I was wondering if I could get some help on an application that I’m building. Basically, I have a list of states, and when clicked on, I want user profile data pertaining to that state to be displayed on the next page. But I have no idea of the code that can accomplish this task.

Here is my code:

members.hmtl:

<ion-header>

  <ion-navbar>
    <ion-title>Members</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="bg">
    <ion-list inset *ngFor="let item of items">
        <button ion-item (click)="navigateToOtherPage(item)">
          {{ item }}
        </button> 
      </ion-list>
</ion-content>

members.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MemberListPage} from '../member-list/member-list';

@IonicPage()
@Component({
  selector: 'page-members',
  templateUrl: 'members.html',
})
export class MembersPage {

  items = [
    'Alabama',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Florida',
    'Georgia',
    'Mississippi',
    'New York'
  ];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad MembersPage');
  }
  itemSelected(item: string) {
    console.log("Selected Item", item);
  }

  navigateToOtherPage(item: string): void {
    this.navCtrl.push(MemberListPage);
  }

members-list.html:

<ion-header>

  <ion-navbar>
    <ion-title>Member List</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="bg">
  <p>This page will pull information about members from a database
     that has not yet been implemented.</p>
  <p>Below is an example profile for a member: </p>
  <ion-card>

      <ion-card-header>
        <strong>Name</strong>: Real Person
        <br><br>
        <strong>Position</strong>: Project Coordinator 
        <br><br>
        <strong>E-mail</strong>: myfakee-mail@yahoo.com
        <br><br>
        <strong>Member Since</strong>: 2010
        <br><br>
        <strong>Social Media</strong>:
        <br><br>
        <button ion-button icon-start (click)="goFacebook()">
          <ion-icon name="logo-facebook"></ion-icon>
        </button>
        <button ion-button icon-start (click)="goInstagram()">
          <ion-icon name="logo-instagram"></ion-icon>
        </button>

      </ion-card-header>
    
      <ion-card-content>
        <!-- Add card content here! -->
      </ion-card-content>
    
    </ion-card>

</ion-content>

members-list.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import firebase from 'firebase';

@IonicPage()
@Component({
  selector: 'page-member-list',
  templateUrl: 'member-list.html',
})
export class MemberListPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MemberListPage');
  }

  goTwitter() : void {
    window.open("https://twitter.com/HOBY", "_blank");
  }

  goFacebook() : void {
    window.open("https://www.facebook.com/HOBY/", "_blank");
  }

  goInstagram() : void {
    window.open("https://www.instagram.com/hoby/", "_blank");
  }

}

For reference, this is what my Members and MembersList pages look like; obviously, the profile will be populated with data from the database.

And this is my current (flat) Firebase database: