Issue
I have function that creates the client, but before that it should check if there are any similar names in database. If there are, it returns array string with those names, if not it returns empty array. My code so far:
let similarNames:string[] = [];
this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(res => {
similarNames = res;
console.log("Length: ", similarNames.length)
console.log(similarNames) <-- console.log shows that everything is fine there
if(similarNames.length > 0){
this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: () => {},
reject: () => {return;}
})
}
this.clientsService.createClient(clientFormData).subscribe(resp => {
this.isLoading = false;
this.onCreateClientSuccess();
}, error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
})
My problem is that this.clientService.createClient doesn't wait for code in if statement to finish. Right now it creates client and then shows similar names and ask to create. I want to work it like that: If there is any similar name pop up should appear with list of those names and if accepted it should just proceed to creating a client if rejected it should exit the function and don't create client.
Solution
You could put the creatClient code in an else
and duplicate it in the use the accept
callback
Of course, then you'll duplicate code for no good reason
So, it's better to create a function for the "common" code and do something like
note the function is an arrow function, to preserve this
let similarNames: string[] = [];
this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(res => {
similarNames = res;
console.log("Length: ", similarNames.length)
console.log(similarNames)
const fn = () => {
this.clientsService.createClient(clientFormData).subscribe(resp => {
this.isLoading = false;
this.onCreateClientSuccess();
}, error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
};
if (similarNames.length > 0) {
this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: fn,
reject: () => {}
});
} else {
fn()
}
})
Another alternative is to use async/await and a new Promise - seems OTT for the situation, but, the code does look clean (IMHO)
let similarNames: string[] = [];
this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(async (res) => {
similarNames = res;
try {
if (similarNames.length > 0) {
await new Promise((resolve, reject) => {
this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: resolve,
reject: reject // will result a thrown error
});
});
}
this.clientsService.createClient(clientFormData).subscribe(resp => {
this.isLoading = false;
this.onCreateClientSuccess();
}, error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
} catch {
}
})
Answered By - Bravo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.