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, Apr 07 '18 at 05:39
Pretty certain you'll have to iterate over your . You did ask an receive an array of them. — Randy Casburn, Apr 07 '18 at 05:40
If you are fetching array of json objects you should map to array in component using map function on response array. See post : https://stackoverflow.com/questions/40256658/getting-an-object-array-from-an-angular-service — Mirko Acimovic, Apr 07 '18 at 05: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, Apr 07 '18 at 05:47
can you console.log(data) at component side and attach it to the question? @Nikson — Suvethan Nantha, Apr 07 '18 at 05:50
@Nikson I'm asking at component side? did you get array of data at component side as well? — Suvethan Nantha, Apr 07 '18 at 05:55
@SuvethanNantha,yes I can get the data at component side by using console.log(data); — Nikson, Apr 07 '18 at 05:56

Suvethan Nantha · Accepted Answer · 2018-04-07T06:39:46.987

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 07 '18 at 06:39

answered Apr 07 '18 at 06:04

Suvethan Nantha

2,404
16
28

can you please help me to fix this issue https://stackoverflow.com/questions/50166996/ngonchanges-not-get-triggered-in-angular4 – Nikson May 04 '18 at 04:39

How to consume data from API in Angular4

1 Answers1