Как правильно разобрать данные из запроса на получение

Question

У меня есть файловый сервер (API) в узле, который возвращает файлы JSON, хранящиеся в системе. Я пытаюсь восстановить эти файлы для подачи моего углового приложения.

Я работаю над 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

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.

Answer 2

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);
}