typescript - Angular 2 issue with web api calling -

i implement web api , returns data in format. think when try show on client side there thing wrong. because response restapi in 2d. kindly guide me doing wrong thankful.

{   "total": 134885,   "data": [     {       "id": 21891,       "source": "eventsystem",       "logid": 4625,       "level": "information",       "date": "2016-03-14t10:14:56",       "category": "(0)"     },     {       "id": 21892,       "source": "msiinstaller",       "logid": 11728,       "level": "information",       "date": "2016-04-29t12:13:24",       "category": "(0)"     },     {       "id": 21893,       "source": "msiinstaller",       "logid": 1035,       "level": "information",       "date": "2016-04-29t12:13:24",       "category": "(0)"     },     {       "id": 21894,       "source": "msiinstaller",       "logid": 1042,       "level": "information",       "date": "2016-04-29t12:13:24",       "category": "(0)"     },     {       "id": 21895,       "source": "msiinstaller",       "logid": 1040,       "level": "information",       "date": "2016-04-29t12:13:24",       "category": "(0)"     },     {       "id": 21896,       "source": "microsoft-windows-restartmanager",       "logid": 10001,       "level": "information",       "date": "2016-04-29t12:13:24",       "category": "(0)"     },     {       "id": 21897,       "source": "microsoft-windows-restartmanager",       "logid": 10000,       "level": "information",       "date": "2016-04-29t12:13:24",       "category": "(0)"     },     {       "id": 21898,       "source": "msiinstaller",       "logid": 11728,       "level": "information",       "date": "2016-04-29t12:13:33",       "category": "(0)"     },     {       "id": 21899,       "source": "msiinstaller",       "logid": 1035,       "level": "information",       "date": "2016-04-29t12:13:33",       "category": "(0)"     },     {       "id": 21900,       "source": "msiinstaller",       "logid": 1042,       "level": "information",       "date": "2016-04-29t12:13:33",       "category": "(0)"     }   ] } 

but when trying display records on client side shows nothing

api calling

import {component, oninit} 'angular2/core'; import {http, http_providers, response} 'angular2/http'; import {observable} 'rxjs/rx'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/do'; import {paginatepipe, paginationservice, paginationcontrolscmp, ipaginationinstance} 'ng2-pagination'; import {eventlogmodel} '../models/eventlogmodel'; import 'rxjs/rx';  @component({     templateurl: './appscripts/layout/eventlog.html',     selector: 'eventlog',     providers: [http_providers, paginationservice],     directives: [paginationcontrolscmp],     pipes: [paginatepipe] })  export class eventlogcomponent implements oninit {      models: array<eventlogmodel> = [];     private _page: number = 1;     private _total: number;     private _size: number = 10;     constructor(private _http: http) {      }     ngoninit() {         this.getpage(1);     }     getpage(page: number) {          this._http.get("http://localhost:54363/api/data/" + page + "/" + this._size + "/")             .map(res => (<response>res).json())             .map((models: array<any>) => {                 let result: array<eventlogmodel> = [];                 if (models) {                     models.foreach(model => {                         result.push(                             new eventlogmodel(                                 model.id,                                 model.source,                                 model.level,                                 model.category,                                 new date(model.date)                             ));                     });                 }                     return result;             }).             subscribe(             data => {                 this.models = data;                 console.log(this.models);             },             err => console.log(err)             );     } } 

html

<eventlog>      <table class="table table-hover" id="mytable">          <tr>              <td class="col-md-3"><b>level</b></td>              <td class="col-md-3"><b>date</b></td>              <td class="col-md-3"><b>source</b></td>              <td class="col-md-3"><b>id</b></td>              <td class="col-md-3"><b>category</b></td>          </tr>            <tr *ngfor="let model of models">              <td class="col-md-3">{{model.level}}</td>              <td class="col-md-3">{{model.date}}</td>              <td class="col-md-3">{{model.source}}</td>              <td class="col-md-3">{{model.id}}</td>              <td class="col-md-3">{{model.category}}</td>          </tr>      </table>      <pagination-controls (pagechange)="getpage($event)" id="server"></pagination-controls>    </eventlog>

the problem data mapping part of request. according json structure need iterate on data models.data.foreach not models.foreach:

.map((models: array<any>) => {     let result: array<eventlogmodel> = [];     if (models.data) {         models.data.foreach(model => {             result.push(                 new eventlogmodel(                     model.id,                     model.source,                     model.level,                     model.category,                     new date(model.date)                 ));         });     }     return result; })