How display data from json array in angular 7

Question

I have a json data set with arrays from my ASP.net Core web api, i want to show that data in angular html page. can you help me.

angular 7 cli

home-page.component.ts

 ngOnInit() {

    this.serverService.getAllProductData().subscribe(
      (response:Response)=>{ 
        let result = response;  
        console.log(result); 
      } 
    );

  }

Data from web API

[

  {
    "productId": 1,
    "productName": "product 1",
    "productPrice": 500
  },

  {
    "productId": 2,
    "productName": "product 2",
    "productPrice": 1000
  },

  {
    "productId": 3,
    "productName": "product 3",
    "productPrice": 2000
  },

  {
    "productId": 4,
    "productName": "PRODUCT 4",
    "productPrice": 3000
  },

  {
    "productId": 5,
    "productName": "produt 5",
    "productPrice": 10000
  }

]

Sajeetharan · Accepted Answer · 2019-04-17 14:12:38Z

2

You need to iterate over the items using ngFor

 <ul>
    <li *ngFor="let resultObj of result">
      {{ resultObj.productName}}
    </li>
 </ul>

also declare the result globally in TS outside ngOnInit.

result : any;

ngOnInit() {
this.serverService.getAllProductData().subscribe(
  (response:Response)=>{ 
    this.result = response;  
    console.log(result); 
  } 
);
}

answered Apr 17, 2019 at 14:12

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Andrew Radulescu · Accepted Answer · 2019-04-17 14:43:35Z

0

You can use Sajeetharan answer, or try async pipe with auto unsubscribe from the Observable.

public getAllProductData$: Observable<any> = undefined; 

ngOnInit() {
    this.getAllProductData$ = this.serverService.getAllProductData();
}

and the template:

<div *ngIf="(getAllProductData$ | async) as data">
   <ul>
     <li *ngFor="let item of data">
       {{ item.productName}}
     </li>
  </ul>
</div>

Good luck!

answered Apr 17, 2019 at 14:43

Andrew Radulescu

1,89915 silver badges23 bronze badges

Collectives™ on Stack Overflow

How display data from json array in angular 7

home-page.component.ts

Data from web API

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

home-page.component.ts

Data from web API

2 Answers 2

Comments

Comments

Related