Iterate JSON in a angular 4 table

Question

I have a ASP.net Web API returning this data.

json Data:

[{"Id":"5a449c148b021b5fb4cb1f66","airline":[{"airlineID":-1,"airlineName":"Unknown","airlineAlias":"","airlineIATACode":"-","airlineICAOCode":"N/A","airlineCallsign":"","airlineBaseCountry":"","airlineActiveIndicator":"Y"},{"airlineID":1,"airlineName":"Private flight","airlineAlias":"","airlineIATACode":"-","airlineICAOCode":"N/A","airlineCallsign":"","airlineBaseCountry":"","airlineActiveIndicator":"Y"},{"airlineID":2,"airlineName":"135 Airways","airlineAlias":"","airlineIATACode":"","airlineICAOCode":"GNL","airlineCallsign":"GENERAL","airlineBaseCountry":"United States","airlineActiveIndicator":"N"}]}]

I have written view in angular 4. My service implementation is

 getairlinedetailsservice(){
    return this.http.get(this.apiurl)
    .map((res:Response)=>res.json())
  }

My Controller implementation is

this.srService.getairlinedetailsservice().subscribe(srs => {
        console.log(srs);
        this.srs=srs;

In my HTML view, I have this code

<tr *ngFor="let sr of srs">
      <td>{{sr.airlineName}}</td>
      <td>{{sr.airlineIATACode}} </td>
      <td>{{sr.airlineICAOCode}} </td>
      <td>{{sr.airlineCallsign}} </td>
      <td>{{sr.airlineBaseCountry}} </td>      
 </tr>

I know im doing something wrong while binding html. Could you please help.

It's returning XML, and you're parsing it by calling `res.json()`? How could that possibly work? — JB Nizet, Dec 31 '17 at 07:38
https://stackoverflow.com/questions/45706419/how-to-convert-xml-to-json-in-angular-4 — Sajeetharan, Dec 31 '17 at 07:41
[how-to-parse-xml-in-angular-2](https://stackoverflow.com/questions/36368405/how-to-parse-xml-in-angular-2) — HDJEMAI, Dec 31 '17 at 07:44
Indent the JSON properly, and you will understand its structure. For example, airlineName is a property of an object airline of each element of the array. Not a direct property of each element of the array. — JB Nizet, Dec 31 '17 at 08:12
@RajivKrishnaa: you are almost there checkout my answer and working example — santosh singh, Dec 31 '17 at 08:31
@RajivKrishnaa: if you face any issue in demo please do let me know — santosh singh, Dec 31 '17 at 08:32

score 2 · Accepted Answer · answered Dec 31 '17 at 08:30

Try following code snippet

<tr *ngFor="let sr of srs[0].airline">
      <td>{{sr.airlineName}}</td>
      <td>{{sr.airlineIATACode}} </td>
      <td>{{sr.airlineICAOCode}} </td>
      <td>{{sr.airlineCallsign}} </td>
      <td>{{sr.airlineBaseCountry}} </td>      
 </tr>

check out following link for demo

DEMO

Iterate JSON in a angular 4 table

1 Answers1