Issue faced data fetching from rest Api in Angular 13?

Question

How can we get data from an array of objects in angular. I have provided the typescript & service file & the consoled image. How can we able to get datas inside results object in the image??

Ts File

this.commonService.fetchVersionValue().subscribe((data) => {
      console.warn(data);
    });

Service File

fetchVersionValue(): Observable<IVersionDetails[]> {
    return this.http.get<IVersionDetails[]>(
      `${this.PHP_API_SERVER}/api/get/versions`
    );
  }

Image

while looking the console I got the error

The Api from php Server Help Me to Sort this Problem . Thanks in Advance

This is because you are passing an object literal instead of an iterable object (array) to *ngFor directive. The property that you bind to the template from the typescript file is not pointing to the data key in the API endpoint response in the screenshot. in the subscribe do .subscribe((response)=>console.log(response['data'])) that will solve your issue accessing the objects inside the array called data correctly. Assign this response['data'] to a property and pass it to the *ngFor. — onrails
– onrails, Commented Jun 2, 2022 at 11:55

chiachu · Accepted Answer · 2022-06-06 04:22:34Z

1

this.commonService.fetchVersionValue().subscribe((response: any) => {
      console.warn(response.results.data);
    });

This Works !!!

answered Jun 6, 2022 at 4:22

chiachu

264 bronze badges

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

Comments

FAISAL · Accepted Answer · 2022-06-02 11:54:54Z

0

Your version details values are stored in the data property in the returned response. So you need to iterate over that property values.

this.commonService.fetchVersionValue().subscribe((response) => {
   console.warn(response.data); // Renaming to response for clarity
});

answered Jun 2, 2022 at 11:54

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

1 Comment

Rishf P Over a year ago

thanks in advance bro . i check but i got like this Property 'data' does not exist on type 'IVersionDetails[]'.ts(2339)

onrails · Accepted Answer · 2022-06-02 12:00:44Z

0

This is because you are passing an object literal instead of an iterable object (array) to *ngFor directive. The property that you bind to the template from the typescript file is not pointing to the data key in the API endpoint response in the screenshot. In the subscribe do subscribe((response)=>console.log(response['data'])) that will solve your issue accessing the objects inside the array called data correctly. Assign this response['data'] to a property and pass it to the *ngFor. –

answered Jun 2, 2022 at 12:00

onrails

8696 silver badges11 bronze badges

3 Comments

Rishf P Over a year ago

Thanks walid .i tried like this but i got Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)

onrails Over a year ago

That's TypeScript compiler complains about the way you define your property type. You can set it explicitly to any (I do not recommend this) because it is against type safety which is why we use TypeScript instead of JavaScript. Or you have to define the property correctly by either passing an object instead of an array something like this -property: { [key: string]: yourInterfaceName [] } = {}. Or you let it to the compiler to infer the type by itself from the context. Changing tsconfig.ts configuration to disable warnings is not good option.

onrails Over a year ago

If none of the above worked , please provide a stackblitz link with how you define your properties in the ts file.

Collectives™ on Stack Overflow

Issue faced data fetching from rest Api in Angular 13?

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related