My objective is to pass data to the same page. I am having trouble understanding the concept. I'm still new to ionic btw.
My request.html
code retrieves the all the request from the request firebase console.
<ion-header>
<ion-navbar color="primary">
<ion-title name="title">Job Requests</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="filter">
<button class="islandwide" ion-button large>Islandwide</button>
<button class="nearby" ion-button large (click)="openMapPage()">Nearby</button>
</div>
<ion-list>
<ion-card *ngFor="let user of request | async" class="job">
<button ion-item (click)="goToJobDetails(user.$key)" class="info">
<ion-avatar class="avatar" item-start>
<img src="../assets/icon/user_male-512.png">
</ion-avatar>
<h2 class="name">{{user.regdetails.username}}</h2>
<p text-wrap class="address"><ion-icon name="compass">
</ion-icon> {{user.regdetails.address}}</p>
<p id="key">{{user.$key}}</p>
</button>
</ion-card>
</ion-list>
</ion-content>
My constructor:
constructor(public navCtrl: NavController, public navParams: NavParams,
angFire: AngularFireDatabase) {
this.request = angFire.list('/request');
this.userreq = angFire.list(`${this.userkey}`);
this.reqdetails = angFire.list('reqdetails');
}
My openMapPage()
method
Basically this method returns all the users who only have reqdetails
, and the data is pass back to the request.html
page
openMapPage()
{
var ref = firebase.database().ref("request");
ref.once("value").then((snapshot) => { // <------ Here!
var a = snapshot.exists(); // true
var c = snapshot.hasChild("reqdetails"); // true
var d = snapshot.child('reqdetails').exists();
var requestsKey = snapshot.key;
var requestsValue = snapshot.val();
snapshot.forEach((childSnapshot) => { // <------ And here!
var requestKey = childSnapshot.key;
var requestValue = childSnapshot.val();
var reqdetails = requestValue.reqdetails;
if (reqdetails) {
this.data = requestKey;
console.log(this.data);
//this.arr.push(requestKey);
//console.log(this.arr);
}
});
this.navCtrl.push(RequestsPage, { 'param1': this.data });
});
}
This is what the request.html
will look like after it gets all the data from the request table. This is the default view meaning it gets all the request records from firebase.
And now I am facing this issue. When a user clicks and triggers my openMapPage()
method in request.html
it will redirect to openMapPage
. How do I redirect the data for the user who only has reqdetails
, to the same html page request.html
I have tried this so far
this.navCtrl.push(RequestsPage, { 'param1': this.data });
But it is still showing the whole request, meaning it has not been filtered.
console.log(this.data);
prints – Mohan Gopi Aug 1 '17 at 4:59