Iterating an interface array with `forEach()`

Question

I'm new to Typescript and I'd like to save the response of an HTTP GET to an array of a type defined by an interface.

getErrors() {
  return this.http.get<ErrorsInterface[]>(environment.apiUrl+'errors').toPromise()
}

Then I declare the array like this and call the function getErrors()

errorsData: ErrorsInterface[]= []

this.errorsData = await this.ErrorsService.getErrors()
this.errorsData.forEach(res => {
 console.log(res.number)
})

But I receive the following error:

ERROR Error: Uncaught (in promise): TypeError: this.errorsData.forEach is not a function TypeError: this.errorsData.forEach is not a function

I appreciate any help

score 1 · Accepted Answer · answered May 12 '21 at 12:20

I don't see the need to convert the observable to a promise here. You could make do just with the observable

Service

getErrors(): Observable<any> {  // <-- return observable
  return this.http.get<ErrorsInterface[]>(environment.apiUrl+'errors');
}

Component

errorsData: ErrorsInterface[]= []

this.ErrorsService.getErrors().subscribe({
  next: (res: any) => {
    this.errorsData = res;
    this.errorsData.forEach(error => {
      console.log(error.number)
    });
  }
  error: (error: any) => {
    // handle error
  }
);

Note:

You cannot convert an asynchronous fetch to a synchronous one. Any statements (like the forEach) that depend on the async data must be inside the subscription. More info about async data here.
toPromise() is being deprecated in RxJS 7 and might be gone in RxJS

thanks, i was also missing this this.errorsData = res.errors; — Pablots99, May 13 '21 at 08:40

score 0 · Answer 2 · answered May 12 '21 at 12:25

0

//in your service file

getErrors():Observable<ErrorInterface[]> {
      return this.http.get<ErrorsInterface[]>(environment.apiUrl+'errors')
  }

 private errorsData= []


getErrors(){
this.ErrorsService.getErrors().Subscribe(res=> 
this.errorsData=res
)
//console.log(this.errorsData.length)
}

answered May 12 '21 at 12:25

Awabil George

310
6
12

Why would you remove the type definition in the component? `errorsData: ErrorsInterface[]= []`? – ruth May 12 '21 at 12:31

Iterating an interface array with `forEach()`

2 Answers2