我正在尝试向后端发出一个http get请求,它返回了一个像这样的json:
"{\"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}"
我正在尝试将其存储在我的var类型接口中,并希望将数据显示为表格。我的代码是这样的:
接口:
export interface IliveLog {
instID: string;
procID: number;
threadNum: number;
status: number;
}
后端http服务:
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');
}
}
实时日志组件:
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 => {
//apenas para ver como funciona
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>
我的日志说对象未定义,我无法在html表中列出它们。看这里: LOG
为什么我的界面类型无法得到响应?后端是问题吗?如果我使用headers: [{'Content-Type': 'application/json'}]
设置标头,则CORS策略会阻止我与后端的连接...
console.log(response)的示例。 log
我的JAVA后端代码:
// 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() );
}
}
}
答案 0 :(得分:0)
所以主要的问题是后端。它实际上返回的是带有字符串的对象,因此它可以识别出来。
我使用JSON editor online来验证json并发现响应不是我期望得到的。
所以我要做的是更改后端,以返回一个包含对象而不是字符串的数组。