How to consume data from API in Angular4

Question

I am working in an Angular4 application ,In this I am trying to receive json data in my component file .But I got undefined as response.

Json structure

Service File

 get_New_Products():Observable<Products[]>{
    this.productServiceURL = `http://localhost:abc/api/data/Get_Product`;
    return this.http.get<Products[]>(this.productServiceURL);
  }

In service file I got the outcome by using the following line of code

console.log(data); //output : Array of data

For Specific data

console.log(data[0]['PRODUCT_NAME']); // output : iPhone

Component File

ngOnInit() {
    this.CartdataService.get_New_Products();
    this.CartdataService.get_New_Products()
    .subscribe(
      data => {
        this.products_Id = data['PRODUCT_ID'];
        this.product_Name = data['PRODUCT_NAME'];
        this.products_Price = data['PRODUCT_PRICE'];
        this.products_Image=data['PRODUCT_IMAGE']
        this.products_Image_Onhover=data['PRODUCT_IMAGE_ONHOVER']
        console.log(this.product_Name);
      });
   }

Here I can't reach the data .I want to bind all the PRODUCT_ID,PRODUCT_NAME..etc in a single variable.I think the way I am trying to get data is wrong.

I must do some magic in these lines ,

    this.products_Id = data['PRODUCT_ID'];
    this.product_Name = data['PRODUCT_NAME'];
    this.products_Price = data['PRODUCT_PRICE'];
    this.products_Image=data['PRODUCT_IMAGE']
    this.products_Image_Onhover=data['PRODUCT_IMAGE_ONHOVER']

Model File

 export interface Products{
   PRODUCT_ID :string[];
   PRODUCT_NAME : string[];
   PRODUCT_PRICE : string[];
   PRODUCT_IMAGE : string[];
   PRODUCT_IMAGE_ONHOVER : string[];
 }

Please help me to solve this issue.

Could you provide the whole component code. You might not inject the service correctly. — Simon Kazakov
– Simon Kazakov, Commented Apr 7, 2018 at 5:39
Pretty certain you'll have to iterate over your <Products[]>. You did ask an receive an array of them. — Randy Casburn
– Randy Casburn, Commented Apr 7, 2018 at 5:40
If you are fetching array of json objects you should map to array in component using map function on response array. See post : stackoverflow.com/questions/40256658/… — Mirko Acimovic
– Mirko Acimovic, Commented Apr 7, 2018 at 5:40
@MirkoAcimovic. - that post refers to the old HTTP API. With v4 by now we should assume HttpClient which expects JSON by default now. This is confirmed by the OP in the question - the data was received by the service correctly. — Randy Casburn
– Randy Casburn, Commented Apr 7, 2018 at 5:47
can you console.log(data) at component side and attach it to the question? @Nikson — Suvethan Nantha
– Suvethan Nantha, Commented Apr 7, 2018 at 5:50

Suvethan Nantha · Accepted Answer · 2018-04-07 06:39:46Z

1

Try this

productData;
this.CartdataService.get_New_Products()
.subscribe(
  data => {
    this.productData=data;
    this.productIds=[];
    for (let item of data) {
       this.productIds.push(data['PRODUCT_ID']);
    }
});

If you want to print all the product names follow the code

<div *ngFor="let item of productData">
   <span>{{item.PRODUCT_IMAGE}}</span>
   <span>{{item.PRODUCT_NAME}}</span>
   <span>{{item.PRODUCT_PRICE}}</span>
   <span>{{item.PRODUCT_IMAGE}}</span>
   <span>{{item.PRODUCT_IMAGE_ONHOVER}}</span>
</div>

I hope this will fix your problem. If you still have any issues let me know.

edited Apr 7, 2018 at 6:39

answered Apr 7, 2018 at 6:04

Suvethan Nantha

2,47418 silver badges30 bronze badges

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

1 Comment

Nikson Over a year ago

can you please help me to fix this issue stackoverflow.com/questions/50166996/…

Collectives™ on Stack Overflow

How to consume data from API in Angular4

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related