I have an application with two angular 14 components. One is parent and the other is child component.
Parent component have an array of objects while child component add the objects by fetching from a service method. Now I need to stop duplication and service calls if a certain code is repeated/duplicated in a list of object.
The problem is with async ngOnInit() : Promise<boolean> in child component. There are four child components and I have added this duplication logic let
resultSpi:MedicationPermissionModel = this.spiPerList && this.spiPerList.length > 0 ? this.spiPerList.find((x) => x.ProviderSpi && x.ProviderSpi.indexOf(this.medication.ProviderSpi) > -1):undefined;
if(!resultSpi) `
before calling to the getProviderServiceLevelToPromise function. I don't want to call it fours times if spiPerList already have a Providerspi code. But rather than checking the duplicate logic for each medicine or child component , system stayed at the same line rather than control goes from the very first line to the bottom lines, control goes four times till getProviderServiceLevelToPromise service function but control flow doesn't goes under it and recall it at top line of async ngOnIt function.
and what happened after it, control goes to the responseObject and then stays four time at the last line of that ngOnInit function. to add the object in the spiPerList and control never goes up than again to check the duplication.
Expected behaviour:
I want to stop calling this function this.medicationService.getProviderServiceLevelToPromise("", "", this.medication.ProviderSpi, "", 0); unless a unique this.medication.ProviderSpi exists.
If anyone want to see more code or logic, please see it here