How to iterate API data using ngFor in Angular 2

Question

I am new in Angular 2 and I want to display all the API data in tabular form. Here is my working code:

http://plnkr.co/edit/CB3oGppm4fvoEExfDSRc?p=preview

But when I am using this code in my files, I am having an error:

Type 'Response' is not assignable to type 'any[]'

test.component.html:

<h1>{{getData[0]?.name}}</h1>
<h1>{{getData[0]?.time}}</h1>
<div *ngFor="let item of getData">
  <span>{{item?.name}}</span>
</div>

app.component.ts

import { Component } from '@angular/core';

import { ConfigurationService } from './ConfigurationService';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  getData = [];

   constructor(private _ConfigurationService: ConfigurationService)
    {
        console.log("Reading _ConfigurationService ");
        //console.log(_ConfigurationService.getConfiguration());

         this._ConfigurationService.getConfiguration()
            .subscribe(
            (data)=> {
                this.getData = data; 
                console.log(this.getData);
            },
            (error) => console.log("error : " + error)
        );
    }
}

This code is working in Plunkr but having error when I try it in my project. Please help to iterate the API values in my project. Thank you.

Can you share the code line where you are having this error? Not in the plunker but in your code. — eko
– eko, Commented Jan 17, 2017 at 13:21
print the response and check format because u might not getting array of response.You might be getting any[] within the response object — Sreemat
– Sreemat, Commented Jan 17, 2017 at 13:23
@echonax Module build failed: Error: app.component.ts (20,17): Type 'Response' is not assignable to type 'any[]' — vinayofficial
– vinayofficial, Commented Jan 17, 2017 at 13:25

Stefan Svrkota · Accepted Answer · 2017-01-17 13:26:42Z

2

That's because you haven't assigned type to your getData variable. If you change getData = []; to getData: any = [];, your code should work. Other solution is to change compiler options in your tsconfig.json file:

"compilerOptions": {
    "noImplicitAny": false
}

If you set noImplicitAny to false, you don't have to assign type to variables, if you don't implicitly set variable's type, it will be set to any automatically.

answered Jan 17, 2017 at 13:26

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

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

1 Comment

jonrsharpe Over a year ago

@vinayofficial but that doesn't entirely solve the problem, because the signature of getConfiguration still doesn't actually reflect what it returns.

Igor · Accepted Answer · 2017-01-17 13:32:17Z

1

The signature of your service method getConfiguration is

(): Observable<Response>

But the return type is not correct, it should be the type that the Observable will materialize. Example:

(): Observable<any[]>

You can make any a specific type.

answered Jan 17, 2017 at 13:32

Igor

62.5k10 gold badges111 silver badges181 bronze badges

1 Comment

Igor Over a year ago

@vinayofficial - I am glad it worked for you. This is the correct way to do it and maintain type safety. Casting to any is usually not recommended if you know the type you are returning.

Collectives™ on Stack Overflow

How to iterate API data using ngFor in Angular 2

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related