Can't get data from a GET request in Angular

Question

CONTEXT

An Angular 8 application requests for an external web api.

The GET request result is something like that:

{
"data": [
    {
        "name": "QWERTY",
        "isValid": false
    }]
}

I am calling the api with this TypeScript code in my service:

private categoryUrl = 'http://localhost:8081/api/categories?OrderBy=';

return this.http.get<ICategory[]>(this.categoryUrl + prop )
    .pipe(
        tap(data => console.log(JSON.stringify(data)))
        ,map(item=>item.data)
);
}

MY PROBLEM

This line of code doesn't compile claiming:

error TS2339: Property 'data' does not exist on type 'ICategory[]'

If I comment the map() line and run it's compiling and the web application starts, but no data are displayed on the html template.

If then I uncomment without stopping, the application recompile, send the same error message. But the request is done correctly and I can see my result on the template.

MY QUESTIONS

How I can explain this?
What is the correct way to do the job?

Thank you

You tell typescript-compiler that there is an array comming from get-ressource. so you would need to access like item[0].data or turn array into single ICategory - do the last option if the Get result is actually like you have shown in first json. — David Renner
– David Renner, Commented Dec 6, 2019 at 22:13

Joshua Chan · Accepted Answer · 2019-12-06 22:19:50Z

2

You are probably just getting a type check error. What are the properties in the class ICategory?

When you do this.http.get<ICategory[]>, the HTTP response is expected to follow the interface of ICategory. Check if data is a property in ICategory, amend accordingly.

If ICategory should be the actual data in the array 'data'. You can either omit the Generic type or use a correct interface for it: this.http.get<{ data: ICategory[]}>

edited Dec 6, 2019 at 22:19

answered Dec 6, 2019 at 22:13

Joshua Chan

1,83710 silver badges16 bronze badges

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

2 Comments

Frédéric De Lène Mirouze Over a year ago

data is not a property of ICategory, this is why I added map() in order to get rid of data and directely access the array. But not sure I master well this operation

David Renner Over a year ago

You could try like this then:

this.http.get<any>(this.categoryUrl + prop).pipe(     tap(data => console.log(JSON.stringify(data))),     map(item=>(item.data as ICategory[])); ); }

JB Nizet · Accepted Answer · 2019-12-06 22:19:07Z

1

Look at the JSON you receive. It starts with {. So it's not an array. It's an object.

But look at your code:

this.http.get<ICategory[]>

This tells TypeScript: trust me, the response body is an array of ICategory objects.

So you need to pass the correct generic type to http.get(). You haven't tols how ICategory is defined, so I have no idea of what this type should be (other than by defining it myself based on the JSON of course).

answered Dec 6, 2019 at 22:19

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Collectives™ on Stack Overflow

Can't get data from a GET request in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related