In my app.component.ts file, I have an array initialized to load objects in the onInit event:
ngOnInit() {
this.pages = [];
}
Within the ngOnInit event, I also have a setInterval method that evaluates an expression every few milliseconds:
setInterval(() => {
if (!this.isUser && !window.location.href.toString().toLowerCase().includes('localhost')) this.setUser();
}, 1000);
Inside the "setUser" method, I populate the "pages" array by making API calls within a loop.
private setUser() {
for (let i = 0; i < this.components.length; i++) {
const component = this.components[i];
this.http.get(urlApi + component).subscribe((data: any) => {
let url = this.getURLComponent(component);
if (url) {
if (data) {
this.pages.push({
url: url,
allowed: true
});
} else {
this.pages.push({
url: url,
allowed: false
});
}
}
});
}
this.testAllowedComponents(pages);
}
Within the same "setUser" method, after exiting the loop, I call another method passing the array of objects as a parameter:
testAllowedComponents(pages: any[]) {
console.log('pages: ', pages);
console.log('pages length', pages.length);
}
The issue arises when accessing the "testAllowedComponents" method – the first console displays the correct content of "pages," but the second console shows a length of 0.
What could be causing this problem? Is it due to asynchronicity when executing the loop inside the setInterval function?