Can't loop through an array of objects in Typescript (Angular)-CodePudding

in my project I'm fetching data from an API (trip entities). This is my model:

  //Trip.model.ts
  export class Trip{
  created_at?:Date;
  updated_at?:Date;
 .... bunch of fields
}

In my component I'm fetching the data and assigning it to the trips variable. However, when I'm trying to access any of the items in the trips array I get 'undefined'. I also can't loop through it, I tried both forEach and for...in/of.
I tried using an interface instead of a class but with no luck. How can I loop through that array of objects in order to use the data in it?
Component's code:

  userName:string='';
  trips:Trip[]=[];
  moment:any=moment;
  usersData:any={};

  constructor(private auth: AuthService,
              private storage: LocalStorageService,
              private translate: TranslateService,
              private tripService: TripService){}

    ngOnInit(): void {
    console.log(this.translate.currentLang)
    this.userName=localStorage.getItem('username')!;
    this.fetchTrips();
    this.fetchPics();
  }

  fetchTrips() {
    this.tripService.getTrips().subscribe({
      next: data => {
        data[0].data.forEach((value) => {
          let trip: Trip = plainToInstance(Trip,value);
          this.trips.push(trip);
        });
      }, error: error => {
        console.log(error);
      }
    });
  }
  //fetchPics because I want to extract 
  //user's profile pics' urls from the trips array
  fetchPics(){
    console.log(this.trips);
    console.log(this.trips[0]);
    this.trips.forEach((trip)=>{
      console.log(trip);
    });
  }

getTrips service method:

getTrips(){
    return this.http.get<any>(Api.API Endpoints.TRIP);
  }

This is what shows when I

console.log(this.trips)

after assignment.

Data from the API:

Pictures cropped to make them more readable.

CodePudding user response：

You are trying to get access to this.trips value before you actually have your data on it.This happens becouse you get that data asynchronously, just inside the subscribe of this.tripService.getTrips()

So, in order to solve your problem, you just need to move this invoke:

 this.fetchPics();

inside the subscribe of fetchTrips() method, like this:

fetchTrips() {
    this.tripService.getTrips().subscribe({
      next: data => {
        data[0].data.forEach((value) => {
          let trip: Trip = plainToInstance(Trip,value);
          this.trips.push(trip);

          this.fetchPics();

        });
      }, error: error => {
        console.log(error);
      }
    });
  }

CodePudding user response：

The function fetchPics() executes before your getTrips call ends. You need to call the method only after your HTTP call ends, and after you populate your trips array successfully.

fetchTrips() {
    this.tripService.getTrips().subscribe({
      next: data => {
        //Populate your trips array
        data[0].data.forEach((value) => {
          let trip: Trip = plainToInstance(Trip,value);
          this.trips.push(trip);
        });
        // this is where you need to call
        this.fetchPics(); 
      }, error: error => {
        console.log(error);
      }
    });
  }