Currently, I am working on developing an application using typescript/angular. In this project, I have a service that retrieves JSON data and I want to display these downloaded objects. However, there is a possibility that the number of objects retrieved may exceed what can be displayed in a single HTML component. Therefore, I need to split this array of objects. Additionally, before doing so, I need to filter all the objects by IP address. To handle this scenario, I created a component like the one below:
export class ServerBoxComponent implements OnInit {
pods = new Array<Pod>();
@Input() node_s: NodeServer;
getPods() {
// console.log('Download pods');
this.httpService.getPods().subscribe(data => {
this.pods = data.items;
});
console.log('Download status: ' + this.pods.length);
}
filtering() {
console.log('Node_s length: ' + this.node_s.status.addresses[1].address);
console.log('Node_s length: ' + this.pods.length);
for (let i = 0; i < this.pods.length; i++) {
if (this.node_s.status.addresses[0].address === this.pods[i].status.hostIP) {
console.log(this.pods[i].metadata.name);
// this.node_s.podArray.push(this.pods[i]);
}
}
}
ngOnInit() {
this.getPods();
// this.filtering();
}
constructor(private httpService: HttpService) { }
}
However, I am facing an issue where the filtering function is not able to access the pods array because it is empty. This has left me wondering why the array is empty in the first place.