angular observables reading json into smart table - json

Question

I am trying to read json data from a restFul server and populate a smart table with the results. I am stuck and cant seem to find out how to get it to work. It seems I am able to read the Json data from the restFul server but I am not real sure how to load it into the smart-table.
Any help is greatly appreciated!
Here are the parts of the application that are used:
the service (smart-table.service):
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { HttpErrorResponse, HttpResponse } from '#angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
export interface LCQIWK {
date: Date;
rank: number;
zone: string;
enodeb: string;
market: string;
usid: number;
impact: number;
tnol: number;
ret: number;
acc: number;
irat: number;
tput: number;
rtt: number;
}
const REST_SERVER = 'http://nonprod-hywrca02-zltv3747-0001- ingress.idns.cci.att.com:31840/thor';
// import { LCQIWK } from './models/lcqiwk';
#Injectable()
export class SmartTableService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get<LCQIWK>(REST_SERVER + '/cqi/lte/wk')
.pipe(
retry(3), // retry a failed request up to 3 times
catchError(this.handleError) // then handle the error
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
}
}
cqi-table.component
import { Component } from '#angular/core';
import { LocalDataSource } from 'ng2-smart-table';
import { LCQIWK, SmartTableService } from '../../../#core/data/smart-table.service';
// import { LCQIWK } from '../../../#core/data/models/lcqiwk';
#Component({
selector: 'app-cqi-table',
templateUrl: './cqi-table.component.html',
providers: [ SmartTableService ],
styleUrls: ['./cqi-table.component.scss']
})
export class CqiTableComponent {
settings = {
actions: false,
columns: {
date: {
title: 'Date',
type: 'number',
},
rank: {
title: 'Rank',
type: 'string',
},
zone: {
title: 'ZONE',
type: 'string',
},
enodeb: {
title: 'eNodeB',
type: 'string',
},
market: {
title: 'Market',
type: 'string',
},
usid: {
title: 'USID',
type: 'number',
},
impact: {
title: 'Impact',
type: 'number',
},
tnol: {
title: 'TNoL',
type: 'string',
},
ret: {
title: 'RET',
type: 'string',
},
acc: {
title: 'ACC',
type: 'string',
},
irat: {
title: 'IRAT',
type: 'string',
},
tput: {
title: 'TPUT',
type: 'number',
},
rtt: {
title: 'RTT',
type: 'number',
},
},
};
error: any;
headers: string[];
lcqiwk: LCQIWK;
source: LocalDataSource = new LocalDataSource();
constructor(private smartTableService: SmartTableService) {
this.smartTableService.getData()
.subscribe(
(data: LCQIWK) => this.lcqiwk = { ...data }, // success path
// this.source.load(this.lcqiwk),,
error => this.error = error, // error path
);
}
clear() {
this.lcqiwk = undefined;
this.error = undefined;
this.headers = undefined;
}
/* showConfig() {
this.smartTableService.getData()
.subscribe(
(data: LCQIWK) => this.lcqiwk = { ...data }, // success path
// this.source.load(this.lcqiwk),
error => this.error = error // error path
);
} */
}
// this.source.load(data);

Answer 1

Try this way...
this.smartTableService.getData()
.subscribe((data) => {
for (let i = 0; i < data.length; i++) {
data = {
id: (i + 1),
date : data[i].date,
rank : data[i].rank,
zone : data[i].zone,
enodeb : data[i].enodeb,
market : data[i].market,
usid : data[i].usid
// ... Add all data
}
this.source.add(data)
}
this.source.refresh();
});
}