How to fetch data from api by angular 5

Question

I have data service that fetch data from my api:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable()
export class DataService {

constructor(private http: HttpClient) { }

showProducts(){
return this.http.get('http://localhost:8000/api/v1/products');
}

}

and my component

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
//import { Products } from '../products';

@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
products;

constructor(private data:DataService) { }

ngOnInit() {
this.showProducts();
}
showProducts() {
this.data.showProducts()
  .subscribe(res => this.products = res);
}

}

and my html compopnent:

<div>
<table border="1">
<tr>
  <th>Product</th>
  <th>Code</th>
  <th>Price</th>
  <th>Action</th>
</tr>
<tr *ngFor="let product of products">
    {{product.product_name}}
</tr>
</table>


</div>

the problem here that i got this error when i run my code in the browser:

1- ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

2- ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}

Mae sure the API returns the Obsdervable of array not object — Basavaraj Bhusani
– Basavaraj Bhusani, Commented May 9, 2018 at 11:40
What does your res look like? Can you do a console.log(res) and show us the output? — nonexistent
– nonexistent, Commented May 9, 2018 at 11:55

Aneri Vala · Accepted Answer · 2018-05-09 12:31:20Z

2

Try this it may helps and see the console.log value too

 showProducts() {
          this.data.showProducts().subscribe(res => {
                 this.products = res;
                console.log(this.products);
           });
  }

answered May 9, 2018 at 12:31

Aneri Vala

5283 silver badges11 bronze badges

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

Comments

Padmapriya Vishnuvardhan · Accepted Answer · 2018-05-09 12:01:27Z

0

I suspect the response comming from the backend.

showProducts() {
this.data.showProducts()
  .subscribe(res => this.products = res);
}

Just check the "res" here. It might not be an array hence the products.

answered May 9, 2018 at 12:01

Padmapriya Vishnuvardhan

2,16616 silver badges18 bronze badges

Comments

celikz · Accepted Answer · 2018-05-09 12:30:20Z

0

Your respond from API must be JSON format, if not you should explicitly declare respondType in your service. something like:

   apiUrl = 'http://localhost:8000/api/v1/products'
   showProducts() {
        return this.http.get<Product[]>(this.apiUrl, {observe: 'response', 
   resposeType: 'text'});
   }

it seems nothing wrong with your DOM or Component.

answered May 9, 2018 at 12:30

celikz

1112 silver badges13 bronze badges

Comments

umesh kumar · Accepted Answer · 2018-05-10 05:52:20Z

0

Try this way it will help and also optimized and check console log value

showProducts(): void {
  this.data.showProducts().subscribe(( this.products: any) => {
    console.log(this.products); 
    });
  }

answered May 10, 2018 at 5:52

umesh kumar

455 bronze badges

Collectives™ on Stack Overflow

How to fetch data from api by angular 5

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related