Create Radio Button Alert from Firestore Data - ionic-framework

Question

I want to create a radio button alert by using the data in fireStore. I generated an observable by valueChanges() but console.log returns Undefined when I used it in the function that can't read the data and eventually cannot insert the values for radio button. I am new to fireStore and ionic.
I have also tried using .get().then(function(doc) but returns error as not a function. I have also tried using subscribe() but also not able to give me the actual data, or I have missed something. I have google for many days but just can't find the solution. I hope somebody could help.
myMemberList = [];
constructor(public navCtrl: NavController,
public alertCtrl: AlertController,
public firestore: AngularFirestore,
public afAuth: AngularFireAuth,
) { }
ionViewDidEnter() {
this.afAuth.authState.subscribe(user => {
if (user) {
this.userId = user.uid;
this.fireStoreTaskList = this.firestore.doc<any>('users/' +
this.userId).collection('Member').valueChanges();
}
});
}
// create the inputs for radio button //
createInputs() {
const theNewInputs = [];
for (let i = 0; i < this.fireStoreTaskList.length; i++) { // undefined
theNewInputs.push(
{
type: 'radio',
label: this.fireStoreTaskList.memberName, // undefined
value: this.fireStoreTaskList.memberId, // undefined
checked: false
}
);
} {
console.log(theNewInputs);
}
return theNewBeneInputs;
}
// Radio button alert to choose data //
async selectMember() {
this.myMemberList = this.createInputs();
const alert = await this.alertCtrl.create({
header: 'Member',
inputs: this.myMemberList,
buttons: [{ text: 'Cancel', role: 'cancel' },
{ text: 'OK',
handler: data => {
console.log(data)
}
}
]
});
await alert.present();
}

Answer 1

I have been working with Ionic 4 for some time now and I have also integrated Firebase Firestore in my app. I didn't really understand the whole description, but I have a solution for you initial question "I want to create a radio button alert by using the data in Firestore"
I assume that you have already setup your application with your Firebase app, if not then I suggest following the How to Build An Ionic 4 App with Firebase and AngularFire 5.
My example has 1 button, that whenever you click it, it will do the following:
Access the Firestore database.
Download the Firestore documents.
Get the field memberName of each document.
Add those names in an array of names
Create an Alert of Radio Buttons.
For the radio buttons it will create a list of radio buttons that will have the names of the members.
Display the array.
For my code to work, this is the Firestore database structure that I have followed:
.
└── collection: "users"
└── document: "autogenerated_id"
| ├── memberID: "user_id"
| └── memberName: "Name 01"
└── document: "autogenerated_id"
├── memberID: "user_id"
└── memberName: "Name 02"
When clicking the button you will see an alert with radio buttons e.g. Name 01 and Name 02
As I have mentioned above, this is my example code. It loads data from Firestore and Creates an alert with radio buttons using that data, as you have described in your question. I have added a lot of comments for you in the code. If this is not exactly what you were looking for, take a look at the code and modify it according to your needs.

Answer 2

UPDATED CODE FOR LOADING memberID and memberName into the array of type interface.
import { Component, OnInit } from '#angular/core';
//Import AngularFirestore to access Firestore database
import { AngularFirestore } from '#angular/fire/firestore';
//Import AlertControll to display alerts
import { AlertController } from '#ionic/angular';
//You have to add the interface, before the calss' declaration
interface Data {
memberID?: string;
memberName?: string;
}
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
//List that will be used to load the data from Firestore into it
//members = []; //You don't this anymore
//Just the array of type interface that you created.
data: Data[] = [];
//Constractor: add AngularFirestore and AlertController
constructor(private db: AngularFirestore, public alertController: AlertController) { }
ngOnInit() {
}
//Load data and create the alert
showAlert(){
//Clear the array before loading again
this.members = [];
//Access the Collection "users" in Firestore and load all the documents
this.db.collection("users").ref
.get()
.then(async (querySnapshot) => {
//Parse through all the loaded documents
querySnapshot.forEach((doc) => {
//Add the loaded name to the list
//this.members.push(doc.data().memberName) // You don't need this anymore as you are going to push the loaded data in the new array
//Pushing the data in the new array or logging it if you want
this.data.push( {
memberID: doc.data().memberID, //This is how you get the memberID from Firestore document
memberName: doc.data().memberName} //This is how you get the memberName from Firestore document
);
});
//Create an array of Radio Buttons to be used in the alert
var newInputs = [];
//Parse through all memebers in the loaded array from Firestore
for (const d of this.data){
newInputs.push({
name: 'radio1', //You can costumize those as well to cast the clicked once afterwards
type: 'radio',
label: "ID: " + d.memberID + " name: " + d.memberName, //Add the member and the ID as label
value: 'value1',
checked: false
})
}
//Create an alert
const alert = await this.alertController.create({
header: 'Radio',
inputs: newInputs, //Add the dynamically generated array of radio buttons.
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]
});
//Present the alert
await alert.present();
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
}