I am a beginner in Ionic. I have 2 APIs that I am using for my form. The first API is used to retrieve the name of the user. I am able to retrieve the name and display it in a label.
Codes are as follows:
my Provider (first API)
getStaff(){
return this.http.get<StaffRecords>(`${this.staffApiUrl}//some api,
{headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))});}
.ts file of my page (first API)
ionViewDidLoad(){
this.christmasProvider.getStaff().pipe(
map((staffResult: StaffRecords) => staffResult && staffResult.records)
).subscribe(staffed => {
if (staffed){
this.storage.set('staff', staffed);
this.staff = staffed;
console.log(staffed);
}
});}
The second API that i used in this form is for posting the user inputs. Currently, I am able to post the user input data into the API. However, I do not know how to take the data I retrieved from the first API and post it into my second API together with all the other fields. Basically, I need to use the data I retrieved from my first API (called ‘display_name’) and post it into the field in my second API (called ‘dedicated_by_name’).
Codes are as follows: my Provider (2nd API)
updateDedication(pledge_amount: number, phone_no: string, sing_to: string, dedicated_datetime: string, sing_to_department: string, location: string, song: string, other_song_request: string, special_request: string, message: string, remain_anon: number, status: string){
return Observable.create(observer =>
this.http.post(`${this.dataApiUrl}//some api`,
{ records: [{
//"dedicated_by_name": dedicated_by_name,
"pledge_amount": pledge_amount,
"phone_no": phone_no,
"sing_to": sing_to,
"dedicated_datetime": dedicated_datetime,
"sing_to_department": sing_to_department,
"location": location,
"song": song,
"other_song_request": other_song_request,
"special_request": special_request,
"message": message,
"remain_anon": remain_anon,
"status": status}],
resource_id: '//some api' },
{ headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN')),
responseType: 'text'})
.subscribe(data => {
console.log(data);
observer.next(true);
observer.complete();
}, error => {
console.log(error);
observer.next(false);
observer.complete();
})
);}
.ts file of my page (2nd API)
gotoConfirmpage(){
this.submitAttempt = true;
console.log("Success!");
console.log(this.dediForm2.value);
var obj = this.dediForm2.value;
//console.log(dedicated_by_name);
this.christmasProvider.updateDedication(obj.pledge_amount, obj.phone_no, obj.sing_to, obj.dedicated_date+"T"+obj.dedicated_time+":00", obj.sing_to_department, obj.location, obj.song, obj.other_song_request, obj.special_request, obj.message, obj.remain_anon, this.status)
.subscribe((allowed => {
//this.submit_error = false;
//this.submit_success = true;
console.log(allowed);
//console.log(obj.dedicated_by_name);
}
));
//push to confirm page
this.navCtrl.push(SongDediCfmPage);}
HTML for the form (I included the part for the first api and the first field for the second api)
HTML for the first API
<ion-content padding>
<p *ngIf="submitAttempt" style="color: #ea6153">Please fill out all fields!</p>
<form [formGroup]="dediForm2">
<h6 style="font-weight: bold" id="dedititle">My Dedication</h6>
<ion-card color="secondary">
<ion-list>
<ion-item>
<ion-icon item-left name="ios-person-outline" style="font-size:30px; width: 20px;"></ion-icon>
<ion-label *ngFor="let s of staff" style="font-style: italic; font-size: 15px;">{{ s.display_name }}</ion-label>
</ion-item>
HTML for the 2nd API (first field only + submit button )
<ion-item>
<ion-icon item-left name="ios-cash-outline" style="font-size:30px; width: 20px;"></ion-icon>
<ion-input type="number" formControlName="pledge_amount" name="pledge_amount" [class.invalid]="!dediForm2.controls.pledge_amount.valid && (dediForm2.controls.pledge_amount.dirty || submitAttempt)" placeholder="Pledge Amount" style="font-style:italic; font-size: 15px;"></ion-input>
</ion-item>
<ion-item *ngIf="!dediForm2.controls.pledge_amount.valid && (dediForm2.controls.pledge_amount.dirty || submitAttempt)">
<p>Please enter an amount lesser than this.</p>
</ion-item>
<button ion-button icon-start class="pledgebtn" (click)="gotoConfirmpage()" [disabled]="!dediForm2.valid">
<img src="assets/imgs/smiley_final.png" class="smileyimg">
DEDICATE <br>SONG
</button>
</form>
Please guide me on how I can store the value retrieved from the first API and post it back to the second API. Thanks guys.