Angular 2 issue with web api calling

Question

I am implement the web api and it returns Data in this format. I think when i am try to show it on client side there is some thing wrong. because the response from the RESTapi is in 2d. kindly guide me where i am doing wrong I will be very 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 i am trying to display the records on client side it shows nothing

api Calling

import {Component, OnInit} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination';
import {EventLogModel} from '../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>

Answer 1

Here is some changes I made in the Code and my api is working perfectly fine. and its performance is also optimized.

Eventlog.components

import {Component, OnInit} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination';
import {EventLogModel} from '../models/eventlogmodel';
import 'rxjs/Rx';
export interface PagedResponse<T> {
    total: number;
    data: T[];
}

export interface DataModel {
    id: number;
    data: string;
}


@Component({
    templateUrl: './appScripts/layout/eventlog.html',
    selector: 'eventlog',
    providers: [HTTP_PROVIDERS, PaginationService],
    directives: [PaginationControlsCmp],
    pipes: [PaginatePipe]
})

export class EventLogComponent implements OnInit {

    private _data: Observable<DataModel[]>;
    private _page: number = 1;
    private _total: number;

    constructor(private _http: Http) {

    }
    ngOnInit() {
        this.getPage(1);
    }
    getPage(page: number) {
        this._data = this._http.get("http://localhost:54363/api/data/" + page + "/10")
            .do((res: any) => {
                this._total = res.json().total;
                this._page = page;
            })
            .map((res: any) => res.json().data);
    }

}

html

<eventlog>
    <div class="container">
        <table class="table table-striped table-hover" id="eventLogTable">
            <thead>
                <tr>
                    <th class="col-md-3">ID</th>
                    <th class="col-md-3">Source</th>
                    <th class="col-md-3">Level</th>
                    <th class="col-md-3">Date</th>
                    <th class="col-md-3">Category</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of _data | async | paginate: { id: 'server', itemsPerPage: 10, currentPage: _page, totalItems: _total }">
                    <td class="col-md-3">{{item.id}}</td>
                    <td class="col-md-3">{{item.source}}</td>
                    <td class="col-md-3">{{item.level}}</td>
                    <td class="col-md-3">{{item.date}}</td>
                    <td class="col-md-3">{{item.category}}</td>
                </tr>
            </tbody>
        </table>
        <pagination-controls (pageChange)="getPage($event)" id="server"></pagination-controls>
    </div>
</eventlog>

My Output

Answer 2

The problem is with your data mapping part of the request. According to your JSON structure you need to iterate over data as 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;
})

Answer 3

You don't mention what the problem is. I assume you get an error because model is null

Try adding *ngIf

<eventlog>
    <table *ngIf="model" 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>

or alternatively use the safe-navigation operator ?

<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>