Zugriff auf verschachtelte JSON api Daten in Winkel mit Modell

Question

Ich bin neu in JSON und eckig. Ich versuche auf eine API-Antwort mit dem Modell zuzugreifen. Aber es gibt mir undefiniert, wenn ich versuche, darauf zuzugreifen.

Unten finden Sie die json API

{ 
    "Inventory App": { 
     "AnalyticsUI": "UP", 
     "BaseUI": "UP", 
     "PlanningUI": "UP", 
     "UploadUI": "DOWN" 
    } 
} 

Mein Modell Definition liefert

export class AppModel { 
constructor(
     public experience: AppList 
    ) {} 
} 

export class AppList { 
    constructor(
     public appName1: String, 
     public appName2: String, 
     public appName3: String, 
     public appName4: String, 
     public appName5: String 
    ) {} 
} 

Below Anruf mein Service ist

import { AppModel } from './model/appList.model'; 
getAppStatus$(): Observable<AppModel> { 
      return this.http 
       .get('https://abc.xyc.com/AppController/AppsStatus') 
       .catch(this._handleError); 
      } 

Im Folgenden wird die Komponente unter

ist, wo ich bin versucht, Zugriff auf die API-Daten.

export class MainComponent { 
...... 
appList: AppModel; 
..... 

public _getAppStatus() { 
     this.appSub = this.api 
      .getAppStatus$() 
      .subscribe(
      res => { 
       this.appList = res; 
       console.log(this.appList); 
       console.log(this.appList.experience); 
      }, 
      err => {console.error(err); } 
      ); 
    } 
} 

Es gibt mir nicht definiert, wenn ich versuche this.appList.experience zuzugreifen. Wo als this.appList das Json-Ergebnis richtig gedruckt wird. Jede Hilfe wird sehr geschätzt.

Console Ausgabe: Console output

Answer 1

Wie AJT und Khan erklärte Problem war Eigenschaftsnamen passende nicht. Nachdem ich den Eigenschaftsnamen so geändert hatte, dass er der json-Antwort entsprach, konnte ich die Werte abrufen.