我该如何正确解析来自get请求的数据

Question

我在节点中有一个文件服务器（API），该服务器返回存储在系统上的JSON文件。我正在尝试恢复这些文件以供我的Angular应用程序使用。

我正在使用angular 7，我已经设置了获取这些数据的服务。这是注入到我的组件，但我不能将数据存储在变量中

我的服务：

@Injectable({
  providedIn: 'root'
})

export class RestApiService {

  // Define API
  apiURL = 'http://localhost:8443/CSV/convertcsv.json';

  constructor(private http: HttpClient) {}

  /*========================================
    CRUD Methods for consuming RESTful API
  =========================================*/

  // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }  

  getTrunkResponse():Observable<HttpResponse<Array<GSXTrunks>>>{
    return this.http.get<Array<GSXTrunks>>(this.apiURL, {observe: 'response'})
  }
}

我的组件：

@Component({
  selector: 'genband',
  templateUrl: './genband.component.html',
})
export class GenbandComponent implements OnInit { 
  Trunks : Array<GSXTrunks> = [];
  headers: any;



  constructor(public restApi: RestApiService) {} 

 ngOnInit() {
    this.showTrunksConfig();
    }

    showTrunksConfig() {
    this.restApi.getTrunkResponse().subscribe( resp =>  {
        this.Trunks = {... resp.body};
        console.log('test');
        for (let i=0; i<this.Trunks.length; i++){
            console.log("test2: "this.Trunks[i].trunk_name);
        }
     });
  }
}

convertcsv.json的内容

[
    {
      "Trunk_name": "2019/07/02 03:21:57",
      "Busy": 1,
      "Idle": 619,
      "Total": 620,
      "Other": 0
    },
    {
      "Trunk_name": "2019/07/02 03:41:53",
      "Busy": 0,
      "Idle": 620,
      "Total": 620,
      "Other": 0
    },
    {
      "Trunk_name": "2019/07/02 04:01:58",
      "Busy": 1,
      "Idle": 619,
      "Total": 620,
      "Other": 0
    },
    {
      "Trunk_name": "2019/07/02 04:21:55",
      "Busy": 0,
      "Idle": 620,
      "Total": 620,
      "Other": 0
    }
]

接口GSXTrunks：

export interface GSXTrunks {
   trunk_name: String,
   busy: String,
   idle: Number,
   total: Number,
   other: Number,

}

因此，我尝试将convertcsv的内容存储在GSXTrunks数组中，但是当我在showTrunksConfig（）中不进行循环时，console.log不会显示任何内容，因为我认为是树干。长度仍然等于零。 目的是在存储在表中之后再次创建4个表，分别包含trunks_name，busy，idle，total，other（由变量组成的表）的值，因为对于套件而言，我需要这些单独的表来提供图形。但是我阻止了恢复。

Answer 1

this.Trunks是不具有length属性的对象。可以将其更改为Object.keys(this.Trunks).length。

for (let i=0; i<Object.keys(this.Trunks).length; i++){
    console.log("test2: "this.Trunks[i].trunk_name);
}

Answer 2

trunk_name <===== the _ underscore ...may not working...better replace from server side.

或者，尝试解析：JSON.parse（serverResponse）

var x = JSON.parse(JSON.stringify(obj));
console.log(x.trunk_name );

service.ts

public getTrunkResponse():Observable<any> {
    return this.http.get(Url , {}, payload, httpOptions ).pipe(
        map(this.extractData),
        catchError((error: HttpErrorResponse) => {
            debugger;
            const errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'dddsd is..';
            return Observable.throw(errMsg);
        })
    );
}

private extractData(res: Response) {
    return res || [];
}

component.ts

    ngOnInit() {
        this.showTrunksConfig();
        }

        showTrunksConfig() {
    const self = this;
        this.restApi.getTrunkResponse().subscribe(
                success => {
                    console.log(success)  //<==== print here 
                   self.apiData = success //<==== store data in variable globally here
or,
var x = JSON.parse(JSON.stringify(obj));
console.log(x.trunk_name );
                },
                error => { }
            );
      }

.html

{{apiData?.key}}  <===== use api data. Use `?` operator to avoid `null` or `undefined` values. use `*ngIf` as well in templates.