When making a HTTP GET request to my backend, it returns the following JSON data:
"{\"instID\":\"2018#10#30\",\"procID\":1161006,\"threadNum\":0,\"status\":2}",
"{\"instID\":\"2018#10#30\",\"procID\":1161021,\"threadNum\":0,\"status\":2}",
"{\"instID\":\"2018#10#30\",\"procID\":1161031,\"threadNum\":0,\"status\":2}"
I need to set this data to an interface so that I can display it in an HTML table later on.
The Interface:
export interface IliveLog {
instID: string;
procID: number;
threadNum: number;
status: number;
}
Backend HTTP Service:
import { Injectable } from "@angular/core";
import 'rxjs/Rx';
import { Observable } from "rxjs/Rx";
import { HttpClient } from "@angular/common/http";
import { IliveLog } from "../jobs/live-log/log.interface";
@Injectable()
export class BackEndService {
constructor(private http: HttpClient) { }
getAgentStatus(): Observable<IliveLog[]> {
return this.http.get<IliveLog[]>('http://localhost:8081/rms_agent/status');
}
}
Live-Log Component:
export class LiveLogComponent implements OnInit {
private dataMaster: IliveLog[] = new Array();//Observable<IliveLog[]>;
private dataAgent: IliveLog[] = new Array();//Observable<IliveLog[]>;
constructor(private backend: BackEndService) { }
ngOnInit() {
setInterval(() => {
this.onGetMaster();
this.onGetAgent();
}, 500);
}
onGetAgent() {
this.backend.getAgentStatus().subscribe(
response => {
// Just for testing purposes
for (const i of response) {
console.log('instID: ' + i.instID);
console.log('procID: ' + i.procID);
console.log('threadNum: ' + i.threadNum);
console.log('status: ' + i.status);
}
for (let i=0; i<response.length; i++)
{
this.dataAgent.push({instID: response[i].instID, procID: response[i].procID, threadNum: response[i].threadNum, status: response[i].status});
console.log("response[i].instID = " + response[i].instID);
}
/* this.dataAgent = response;
console.log("Agent: " + this.dataAgent); */
}
)
}
HTML:
<p>Running on Agent:</p>
<table border="1">
<thead>
<td>instID</td>
<td>procID</td>
<td>threadNum</td>
<td>status</td>
</thead>
<tbody>
<tr *ngFor="let item of this.dataAgent">
<td>{{item.instID}}</td>
<td>{{item.procID}}</td>
<td>{{item.threadNum}}</td>
<td>{{item.status}}</td>
</tr>
</tbody>
</table>
<p *ngIf="this.dataAgent">{{ this.dataAgent }}</p>
<button class="btn btn-success" [disabled]="true">start</button>
<button class="btn btn-danger" [disabled]="true">kill</button>
<button class="btn btn-info" [disabled]="true">log</button>
<hr>
The issue I'm facing is that when trying to list the objects in my HTML table, they are showing as undefined: Console LOG
Here is the result displayed in the HTML table: HTML table result
Why am I not getting the response in the desired format according to my interface? Could it be an issue with the backend implementation? Check out this example of console.log(response) for reference: Example of console.log(response)
My JAVA Backend Code:
// pe/status
static class StatusHandler implements HttpHandler {
ProcessManager pm;
public StatusHandler(ProcessManager pm) {
this.pm = pm;
}
public void handle(HttpExchange httpExchange) {
try {
// Get Processes status
HashMap<String,ProcessTask> currProcs = pm.getRunningProcs();
JSONArray rspBuilder = new JSONArray();
// If not empty
if (!currProcs.isEmpty()) {
// Iterate
Collection<ProcessTask> procList = currProcs.values();
if (procList != null && !procList.isEmpty()) {
for (ProcessTask pt : procList) {
JSONObject procBuilder = new JSONObject();
procBuilder.put("procID",pt.getProcID());
procBuilder.put("instID",pt.getInstID());
procBuilder.put("threadNum",pt.getThreadNum());
procBuilder.put("status",pt.getStatus());
rspBuilder.put(procBuilder.toString());
}
}
}
// build response
String response = rspBuilder.toString();
httpExchange.getResponseHeaders().add("Access-Control-Allow-Origin", "*");
httpExchange.sendResponseHeaders(200, response.length());
OutputStream os = httpExchange.getResponseBody();
os.write(response.getBytes());
os.close();
} catch (Exception ex) {
LogUtils.log(LogUtils.LOG_ERROR,"[ WS StatusHandler ] Error Message - " + ex.getMessage() );
}
}
}