Angular 4 + Web API can't retrieve data with GET method

Question

My Web APPI is working ok when I call the GET method on local server ( http://localhost:51085/api/GetMethod ) it retrieves the correct array of objects.

But, when I call it from Angular4 app, the returned observable shows

[object Object] and an error for *ngFor ( ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.).

export class AppComponent { 

   myDesiredDataFromServer$; 

   constructor(private service: ServiceHTTP) { 
      this.myDesiredDataFromServer = service.getData(); 
   }
}

Any help ?

if you are returning an observable, use async pipe in ngFor to map it — JayDeeEss
– JayDeeEss, Commented Sep 13, 2017 at 11:55
I'm already using a async JayDeeEss : *ngFor="let item of myDesiredDataFromServer $ | async" — GCoe
– GCoe, Commented Sep 13, 2017 at 11:58
ok..hope space between myDesiredDataFromServer and $ is a typo and why different names in ts file, with and without $?? — JayDeeEss
– JayDeeEss, Commented Sep 13, 2017 at 12:03

federico scamuzzi · Accepted Answer · 2017-09-14 06:57:03Z

1

I think your problem is you're NOT waiting for the response from the server ..

if your service in .ts is returning an Observable<Array<any>>

so try:

   export class AppComponent { 

       myDesiredDataFromServer$; 



 constructor(private service: ServiceHTTP) { 


       service.getData().subscribe((resp)=>{
             this.myDesiredDataFromServer = resp;
        }); 
       }
    }

if it is returning a Promise<Array<any>>:

export class AppComponent { 

       myDesiredDataFromServer$; 

       constructor(private service: ServiceHTTP) { 
          service.getData().then((resp)=>{
             this.myDesiredDataFromServer = resp;
             }); 
       }
    }

if it is returning a async:

 export class AppComponent { 

       myDesiredDataFromServer$; 

       async constructor(private service: ServiceHTTP) { 
         this.myDesiredDataFromServer = await  service.getData();
       }
    }

edited Sep 14, 2017 at 6:57

answered Sep 13, 2017 at 12:02

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

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

3 Comments

GCoe Over a year ago

Thank you Federico.I'll try it.

federico scamuzzi Over a year ago

let me now if it works .. if you can post also your service code

GCoe Over a year ago

After subscribing I can see the data array correctly returned at the "_body' property of the return. With service.getData().subscribe((resp)=>{ this.myDesiredDataFromServer$ = ((resp)['_body']); console.log("Ret -> ", this.myDesiredDataFromServer$); }); But can't render with *ngFor -> ERROR Error: InvalidPipeArgument: '[{"Date":"2017-09-13T00:00:00",...etc ( displaying my data array )

Daniel Swiegers · Accepted Answer · 2017-09-13 12:24:48Z

0

try

export class AppComponent { 

   public myDesiredDataFromServer$; 

   constructor(private service: ServiceHTTP) { 
      this.myDesiredDataFromServer$ = service.getData(); 
   }
}

Then if it's an observable try the following in your template to print out the full object and not just [object Object]

{{ myDesiredDataFromServer$ | async | json }}

If your ServiceHTTP getData method returned an observable then you should at least be able to see the format of the data you are getting. If you are using it in an *ngFor make sure it's of type array

e.g. If it prints { someKey: [] } then you could run *ngFor="let item of (myDesiredDataFromServer$ | async)?.someKey"

answered Sep 13, 2017 at 12:24

Daniel Swiegers

5,6911 gold badge11 silver badges13 bronze badges

4 Comments

GCoe Over a year ago

Hi Daniel, my data is at the response _body property but can't render it with *ngFor -> ERROR Error: InvalidPipeArgument: '[{"Date":"2017-09-13T00:00:00", ...etc with my array data

Daniel Swiegers Over a year ago

so in your template {{ myDesiredDataFromServer$ | async | json }} shows that object? If so try <div *ngFor="let item of (myDesiredDataFromServer$ | async)">Looped</div>

Daniel Swiegers Over a year ago

if {{ myDesiredDataFromServer$ | async | json }} displays {response_body: [{"Date":"2017-09-13T00:00:00}]} then try <div *ngFor="let item of (myDesiredDataFromServer$ | async).response_body">Looped</div>

Daniel Swiegers Over a year ago

If the async pipe isn't working at all in your template you can always subscribe to updates in your controller and update a variable that *ngFor loops through. e.g. public myVariable = []; service.getData().subscribe(data => {this.myVariable = data.response_body});, then <div *ngFor="let item of myVariable">looped</div>

GCoe · Accepted Answer · 2017-09-13 15:37:22Z

0

This worked :

service.getData().subscribe((resp)=>{
    this.myDesiredDataFromServer$ = JSON.parse((resp)['_body']);

});

enter code here

answered Sep 13, 2017 at 15:37

GCoe

8854 gold badges15 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular 4 + Web API can't retrieve data with GET method

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related