Verschachtelte Daten aus dem JSON-Objekt in Angular erhalten 2

Question

Hallo, ich baue so etwas wie eine Musik-Player-App. Ich habe einen Service eingerichtet, der die Daten aus einer JSON-Datei aufnimmt, die ich in einem Gerät habe. Ich kann alle Daten der obersten Ebene mit * ngFor erfassen, aber sobald ich anfange, nach etwas wie songs.parts.name zu fragen, wird dies undefiniert angezeigt.

Ich habe die * ngFür das Ausspucken der obersten Ebene Schlüsselwertpaare auf einer Seite und dann möchte ich in der Lage sein, auf einen bestimmten Songnamen zu klicken und die Daten filtern, um die richtige Song-URL zu finden.

Wie kann ich das Array durchlaufen und diese Objekte greifen?

Jede Hilfe würde sehr geschätzt werden.

JSON

{ 
    "songs": [ 
    { 
     "name": "America The Beautiful", 
     "difficulty": "Medium", 
     "time": "3:38", 
     "hasPianoWords": true, 
     "hasPianoSolfa": false, 
     "hasTrackWords": false, 
     "parts": [ 
     { 
      "name": "Baritone", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/baritone/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/baritone/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/baritone/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     }, 
     { 
      "name": "Bass", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/bass/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/bass/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/bass/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     }, 
     { 
      "name": "Second Tenor", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/second-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/second-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/second-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     }, 
     { 
      "name": "First Tenor", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/first-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/first-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/first-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     } 
     ] 
    } 
    ] 
} 

Songs.Service.ts

export class SongService { 
    constructor(private _http: Http) {} 

    getAllSongs() { 
     return this._http.get('/fixtures/songs.json') 
      .map((response: Response) => response.json().songs) 
      .toPromise() 
      .catch(this.handleError); 
    } 

    getSongByName(songName:string) { 
     return this._http.get('/fixtures/songs.json') 
      .map((response: Response) => _.find(response.json().songs, {'name': songName})) 
      .toPromise() 
      .catch(this.handleError); 
    } 

Song-Komponente

export class SongsComponent { 
    public songs: any; 
    public activeSong: any; 
    public activeSongURL: any; 

    constructor(private _songsService: SongService, private router: Router, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this._songsService.getAllSongs().then(result => { 
      this.songs = result; 
      console.log('Songs: ', this.songs); 
     }); 
    } 

    playSong(songName:string) { 
     console.log('clicked song:', songName) 

     this._songsService.getSongByName(songName).then(result => { 
      this.activeSong = result; 
      console.log('active song', this.activeSong); 
      this.activeSongURL = this.activeSong.baritone.pianoWords; 
      console.log(this.activeSongURL); 
     }) 
    } 

    selectSong(songName:string) { 
     this.router.navigate(['/song'], songName); 
    } 
} 

HTML-Vorlage

<section class="songs container"> 
    <div class="song col-md-3" *ngFor="let song of songs"> 
     <h4 (click)="selectSong(song.name)">{{song.name}}</h4> 
     <span>Difficulty: {{song.difficulty}}</span> 
     <span>Time: {{song.time}}</span> 
     <span><strong>Baritone</strong></span> 
     <span *ngIf="song.hasPianoSolfa" class="piano-solfa"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Solfa</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasPianoWords" class="piano-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Words</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasTrackWords" class="track-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Track Words</span> 
    </div> 
</section> 

<section class="audio-player"> 
    <audio src="{{activeSongURL}}" autoplay controls="controls"> 
     Your browser does not support the <code>audio</code> element. 
    </audio> 
</section> 

Answer 1

Sie könnten die Verwendung von Safe-Navigation-Operator

machen Sieht aus wie Sie es von hatte vielleicht oder nahe gewesen, es zu haben, sollte es nicht sein somehting wie

<section class="songs container"> 
    <div class="song col-md-3" *ngFor="let song of songs"> 
     <h4 (click)="selectSong(song.name)">{{song.name}}</h4> 
     <span>Difficulty: {{song.difficulty}}</span> 
     <span>Time: {{song.time}}</span> 

     <div *ngIf="song?.parts.length > 0"> 

      <div *ngFor="let part of song?.parts"> 
       <strong>{{ part.name }}</strong> 
       <span class="piano-words" (click)="playSong(song.name)"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Words</span> 
       <span class="piano-solfa" (click)="playSong(song.name)"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Solfa</span> 
       <span class="track-words" (click)="playSong(song.name)"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Track Words</span> 
      </div> 

     </div> 

     <!-- <span><strong>Baritone</strong></span> 
     <span *ngIf="song.hasPianoSolfa" class="piano-solfa"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Solfa</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasPianoWords" class="piano-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Words</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasTrackWords" class="track-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Track Words</span> 
    </div> --> 
</section>