title: How to fill a table with an object including an array of object in Angular2
body: <p>I'm currently programming in Angular2/Typescript and I'm blocked with a table. I want to fill a table with the information I receive from my service which looks like that :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>[
   {
    "id": 1,
    "serviceWindow": "24/7",
    "status": "Active",
    "customer": "BGL",
    "serviceProvidedType": "Call Desk",
    "drpContactList": [
     {
      "id": null,
      "name": "Jean Bon",
      "timeStart": "08:00",
      "timeEnd": "16:00",
      "value": "jean.bon@ctg.com",
      "mediumType": "Email"
     },
     {
      "id": null,
      "name": "Charles Degaule",
      "timeStart": "16:00",
      "timeEnd": "19:00",
      "value": "+352 258 484 494",
      "mediumType": "SMS"
     }
    ]
   },
   {
    "id": 2,
    "serviceWindow": "Week-end",
    "status": "Active",
    "customer": "POST",
    "serviceProvidedType": "Monitoring",
    "drpContactList": [
     {
      "id": null,
      "name": "Michel Palmas",
      "timeStart": "10:00",
      "timeEnd": "15:00",
      "value": "+352 658 194 191",
      "mediumType": "Phone"
     }
    ]
   },
   {
    "id": 3,
    "serviceWindow": "Business hours",
    "status": "Active",
    "customer": "ING",
    "serviceProvidedType": "Sharepoint",
    "drpContactList": [
     {
      "id": null,
      "name": "Alex Lapage",
      "timeStart": "05:00",
      "timeEnd": "10:00",
      "value": "alex.lapage@ctg.com",
      "mediumType": "Email"
     }
    ]
   },
   {
    "id": 4,
    "serviceWindow": "Manage services",
    "status": "Active",
    "customer": "DEXIA",
    "serviceProvidedType": "System Admin",
    "drpContactList": [
     {
      "id": null,
      "name": "Rémi Hirtz",
      "timeStart": "19:30",
      "timeEnd": "23:00",
      "value": "+352 595 945 154",
      "mediumType": "Phone"
     }
    ]
   },
   {
    "id": 5,
    "serviceWindow": "Enterprise holiday",
    "status": "Active",
    "customer": "POST",
    "serviceProvidedType": "Hands &amp; Eyes",
    "drpContactList": [
     {
      "id": null,
      "name": "Thomas Jacobs",
      "timeStart": "13:00",
      "timeEnd": "18:30",
      "value": "thomas.jacbos@ctg.com",
      "mediumType": "Email"
     }
    ]
   },
   {
    "id": 6,
    "serviceWindow": "24/7",
    "status": "Active",
    "customer": "BGL",
    "serviceProvidedType": "IT Outsourcing",
    "drpContactList": [
     {
      "id": null,
      "name": "Adrien Lafonte",
      "timeStart": "05:45",
      "timeEnd": "10:30",
      "value": "+352 151 615 842",
      "mediumType": "SMS"
     }
    ]
   }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>So there is an array of object in my principal object. How can I display the information of the second array ? I tried some tricks but I never found a good way. Here is my HTML and Typescript :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-hover table-condensed"&gt;
              &lt;th style="width:150px" align="center"&gt;Customer&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;Service provided&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;Service window&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;DRP contact name&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;Time Start&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;Time End&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;Medium&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;DRP contact address&lt;/th&gt;
              &lt;th style="width:150px" align="center"&gt;Status&lt;/th&gt;
  
              &lt;tr *ngFor="#drp of drps"
                  [class.selected]="drp === selectedDrp"
                  (click)="gotoEdit(drp)"&gt;
  
                  &lt;td style="width:150px" align="center"&gt;{{drp.customer}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.serviceProvidedType}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.serviceWindow}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.drpContactList[0].name}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.drpContactList[0].timeStart}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.drpContactList[0].timeEnd}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.drpContactList[0].mediumType}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.drpContactList[0].value}}&lt;/td&gt;
                  &lt;td style="width:150px" align="center"&gt;{{drp.status}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, for the moment I only show the first objet in the array. Either I put everything in only one row or I can create as row as object in the array.</p>
  
  <p>Here is the Typescript behind everything :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export class ListDrpsComponent extends BaseComponent implements OnInit {
      drps:Drp[];
  
      constructor(private _drpService:DrpService,
                  private messageService:MessageToUserService,
                  private _router:Router) {
          super(_router, messageService);
      }
  
      onAddDrp() {
          let link = ['AddDrp'];
          this._router.navigate(link);
      }
      
      getDrps() {
          this._drpService.getDrps().subscribe(
              data =&gt; {
                  this.onNext(data)
              },
              (data)=&gt; this.onError(data),
              () =&gt; null
          );
      }
  
      onNext(data:Response) {
          super.onNext(data);
          this.drps = &lt;Drp[]&gt; data.json();
          console.log(this.drps);
      }
  
      ngOnInit() {
          this.getDrps();
      }
  
      onError(data:Response) {
          super.onError(data);
      }
  
      gotoEdit(drp:Drp) {
          let link = ['EditDrp', {id: drp.id}];
          this._router.navigate(link);
      }
      
      
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm sorry for the presentation of the code, I'm new here ! If you need more details, tell me, I will try to respond to your demand. And sorry for my English, it's not my native language, I'm still learning.</p>
  
  <p>Cordially,</p>
  
  <p>Florian</p>
  
  <p>EDIT : Here is a picture of what the table looks like. I wanted to have one row per information if possible (so i should repeat the first object information as many times as there is object in the second array)</p>
  
  <p><a href="https://i.stack.imgur.com/nMM5G.png" rel="nofollow noreferrer">Table of DRP</a></p>