Why do I get TypeError: _this.data.forEach is not a function

Question

I am trying to retrieve data from the backend. These are the relevant parts of my code:

API call

getData(PrimaryId:number):Observable<DataDto[]>{
  return this.httpClient.get(`${this.prefix}/<xyz>/${PrimaryId}/xyz`) as Observable<DataDto[]>
}

Component TypeScript

onRetrieveClicked() {
  this.xyzService.getData(this.PrimaryId).subscribe(
    (xyz: DataDto[]) => {
      this.xyz = xyz
      console.log(this.xyz)
      console.log(this.xyz.forEach((data)=>data.name) 
  })
}

First console.log output

{content: Array(1), pageable: {…}, totalPages: 1, totalElements: 1, last: true, …}
       content: Array(1)
       0: {name: max, name: null, asset: null,  …}
       length: 1
       ..........

But when I try to print only the name in the second console, it says that forEach is not a function. How can I solve this

edit Dto model

export interface DataDto {
name: string
asset: abcDto 
status: StatusDto 
tasks: efgDto[]
nextDate: string
}

assumingly you want to call forEach for content which is present in your data..... — AVJT82
– AVJT82, Commented Sep 19, 2019 at 11:54
It seems like the data you get might be a plain object, not an array. It has some arrays as values, though. — VLAZ
– VLAZ, Commented Sep 19, 2019 at 11:55
I tried accessing it this way. this.xyz.content.map(data=>data.name) I get the output but also in the iDE, there is an error saying content does not exist on type DataDto[] — queue
– queue, Commented Sep 19, 2019 at 12:00
xyz: DataDto[] is misleading the TS compiler. If you are indeed getting a plain object at runtime, then TS doesn't know that, it thinks you are getting an array but it can only check that at compile time. — VLAZ
– VLAZ, Commented Sep 19, 2019 at 12:03
Check my answer, it explains entirely what's going on here, and how to fix it using Angular preferred operations. — Robin De Schepper
– Robin De Schepper, Commented Sep 19, 2019 at 12:07

Robin De Schepper · Accepted Answer · 2019-09-19 12:24:17Z

1

The xyz variable that you type as DataDto[], an array, is actually an object. This can be seen in your console.log, an array would be enclosed in [], not {}

is an object --> {
  content: Array(1), pageable: {…}, totalPages: 1, totalElements: 1, last: true, …}
       content: Array(1)
       0: {name: max, name: null, asset: null,  …}
       length: 1
 }

The data you are looking for is most likely the response object's content so add an import for import {map} from 'rxjs/operators'; and transform the data you've gotten from the response:

this.xyzService.getData(this.PrimaryId).pipe(
  map((xyzResponse: any) => xyzResponse.content)
).subscribe(
  (xyz: DataDto[]) => {
    this.xyz = xyz;
    console.log(this.xyz);
    let dataNames = xyz.map(data => data.name);
    console.log(dataNames);
}

I've typed xyzResponse as any but you could ofcourse create a reusable type for it if the API always returns the object with content, pageable, totalPages, ...

Rxjs is the library that Angular uses to handle asynchronous programming, such as HTTP calls or component events. Rxjs chains asynchronous manipulations together in a pipe (hence the .pipe call). Inside of this pipe rxjs expects a chain of operators that will perform operations on the asynchronous data, one by one. The map operator takes the input value and returns a new value so that the value you subscribe to has been transformed from the HTTP response to the .content field of the HTTP response.

Working in this way fixes all TypeScript compiler errors and allows you to chain additional calls later, like retrying if the API times out, or catching errors, or merging in other HTTP calls.

edited Sep 19, 2019 at 12:24

answered Sep 19, 2019 at 12:00

Robin De Schepper

6,5245 gold badges44 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

queue Over a year ago

it returns undefined

Robin De Schepper Over a year ago

What does? The 2nd console.log? That's your code, but yea it'll print that, because forEach doesn't return a value :p

Robin De Schepper Over a year ago

If you want to see each data.name use this: this.xyz.forEach((data)=>{console.log(data.name)})

Diego Bascans · Accepted Answer · 2019-09-19 12:26:56Z

1

It seems that your this.xyz is not an array, but has an array property called content, you should modify your response object in order to accept it.

You can check if your objects are arrays with the following method

Array.isArray(obj)

Update your code to this.

this.xyzService.getData(this.PrimaryId).subscribe(
  (xyz: NewObject) => {
    this.xyz = xyz
    console.log(this.xyz)
    //If you have doubts of what is comming is nice to check if your property is an array
    if(Array.isArray(this.xhy.content) {
        console.log(this.xyz.content.forEach((data)=>data.name) });
    }
}

Create a new object in order to support your response

class NewObject {
    content: Array<DataDto>
    // other values here
}

Another approach is like @Robin says in the comment

this.xyzService.getData(this.PrimaryId).subscribe((xyz: {content: DataDto[]}) => 
        {
        this.xyz = xyz
        console.log(this.xyz)
        //If you have doubts of what is comming is nice to check if your property is an array
        if(Array.isArray(this.xhy.content) {
            console.log(this.xyz.content.forEach((data)=>data.name) });
        }
    }

edited Sep 19, 2019 at 12:26

answered Sep 19, 2019 at 12:01

Diego Bascans

1,1791 gold badge6 silver badges14 bronze badges

2 Comments

queue Over a year ago

error TS2339: Property 'content' does not exist on type 'DataDto[]

Robin De Schepper Over a year ago

Well if you wanna cut corners you could just do: .subscribe((xyz: {content: DataDto[]}) => {console.log(xyz.content.forEach((data)=>data.name))})

Shaphan · Accepted Answer · 2019-09-19 12:04:49Z

0

It's because you are trying to loop through an object instead of array I think you can try this:

console.log(this.xyz.content.forEach((data)=>data.name) })

answered Sep 19, 2019 at 12:04

Shaphan

1,06311 silver badges10 bronze badges

1 Comment

queue Over a year ago

error TS2339: Property 'content' does not exist on type 'DataDto[]

Collectives™ on Stack Overflow

Why do I get TypeError: _this.data.forEach is not a function

API call

Component TypeScript

First console.log output

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

API call

Component TypeScript

First console.log output

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related