Angular - ответ http на интерфейс не определен

Question

Я пытаюсь сделать запрос 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

Результат таблицы html

Почему я не могу получить ответ в типе моего интерфейса? Проблема в бэкенде? Если я установлю свои заголовки с помощью headers: [{'Content-Type': 'application/json'}], мое соединение с бэкендом будет заблокировано политикой CORS ...

Пример console.log (ответ). 1038 * журнал *

Мой код 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() );
            }
        }

    }  

Answer 1

Так что главной проблемой был бэкэнд. Он действительно возвращал объект со строками, поэтому он распознал бы это.

Я использовал JSON-редактор онлайн , чтобы проверить JSON и убедиться, что ответ не соответствует ожиданиям.

Итак, я изменил бэкэнд так, чтобы он возвращал массив с объектами, а не со строками.