Malik Kashmiri Malik Kashmiri -4 years ago 184
TypeScript Question

Angular 2 issue with web api calling

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 Source

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

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download