Here is a method that I have crafted:
fetchUser(endpoint: string, email: string) {
const url = this.envConfigurationService.baseEndpoint + '/' + conf.apiPrefix + '/' + endpoint + email;
this.loadingService.loadingOn();
return this.http.get(url).pipe(
finalize(() => this.loadingService.loadingOff()),
catchError((err) => {
this.handleError(err);
return throwError(err);
}),
tap(() => this.toastrService.success('OK')),
);
}
and this is how I invoke it in the component.ts file:
searchUser() {
this.backendIntegrationService.fetchUser('user?code=', encodeURIComponent(this.form.value.email)).subscribe({
next: (res) => {
if (res['result'] === 'OK') {
this.userdata = res['body'];
this.message = res['message']
}
else {
this.errorMessage = res;
}
},
error: err => {
this.errorMessage = err;
}
});
console.log(this.userdata)
this.entityConfiguration.inputFields.forEach(field => {
console.log(this.userData)
let value = null;
value = this.userData[field.name];
if (field.disabled) {
this.formControls[field.name] = this.fb.control({value: value, disabled: true});
} else {
this.formControls[field.name] = this.fb.control(value);
}
});
this.form = this.fb.group(this.formControls);
}
I am encountering an issue where the object this.userdata only gets populated on the second call (when I press the search user button for the second time), even though I receive the values from the backend on the first attempt.
What could be the mistake here?