Recently, I encountered a peculiar issue after converting a .forEach loop into an actual for loop. The problem arises when I try to push elements into an array, it somehow disrupts the functionality of the .find() method. I am puzzled as to why this is happening because I don't believe I am altering the array in any way; my understanding was that each find operation starts fresh with the original object every time.
I attempted to replicate this problem by creating a simplified version using stackblitz (utilizing combineLatest, for loop with find), but to my surprise, I could not reproduce the error (you need to check the console in the stackblitz). Therefore, I am reaching out in hopes that someone might be able to spot something that I may have overlooked!
https://stackblitz.com/edit/angular-xpzku2
Additionally, it's worth mentioning that the companyList is initialized elsewhere as empty - which is the desired state in this scenario. Although it's not always empty, in this particular context, being empty is essential. Interestingly enough, I only noticed the issue when the list was empty.
Update: I even tried simplifying the process by focusing solely on loops, finds, and pushes, yet the problem persists. Strangely, when I transfer almost identical code to stackblitz, everything functions smoothly. My suspicion now leans towards the record I'm adding, extracted from mstCompanyList populated via spread operator from the observable. At this point, I must admit feeling rather foolish, so any guidance would be highly appreciated! :)
combineLatest(routesObs, companiesObs, locationsObs, contractorObs).subscribe(([rList, cList, mList, cntList]) => {
this.routeList = [...rList];
this.mstCompanyList = [...cList];
this.mstLocationList = [...mList];
this.mstContractorList = [...cntList];
// Initially, companyList is a properly initialized, empty object.
console.log(JSON.stringify(this.companyList));
// Creating a deduplicated version of company List; if the company ID already exists, skip, otherwise add. NOTE: This functioned correctly when it was utilizing .forEach(), unsure why the current implementation is failing.
// The find method begins returning an undefined object for cc during the second iteration (after the first push). Even after removing the entire routeRecord portion, the issue remains persistent; hence, I'm working on narrowing down the problem further.
for (var x = 0; x < this.routeList.length; x++) {
// Console logs reveal that routeList stays intact and consistent throughout each iteration.
console.log(JSON.stringify(this.routeList));
let routeRecord = this.routeList[x];
// The trouble lies here - the documentation states that find shouldn't execute the callback unless there's an object, yet cc returns undefined. To investigate, I transformed it into a fat arrow function with a console log inside. STRANGELY, THIS BEHAVIOR ONLY OCCURS AFTER THE SUBSEQUENT PUSH, WORKING AS EXPECTED BEFOREHAND.
let companyExists = this.companyList.find((cc) => {
console.log(JSON.stringify(cc));
return cc.id == routeRecord.companyId
});
// If the company isn't on the list, add it. However, this breaks the previous validation, which forms the core of my dilemma!
if (companyExists == null) {
let companyRec = this.mstCompanyList.find(cl => cl.id == routeRecord.companyId);
this.companyList.push(companyRec);
}
}