JSONオブジェクトからネストされたデータを角2で取得

Question

こんにちは私は音楽プレーヤーのアプリに類似したものを構築しています。私は、JSONファイルからデータを取得するサービスを用意しています。 * ngForですべてのトップレベルデータを取得できますが、一度songs.parts.nameのようなものを尋ねると、これは未定義となります。

私は* ngForページのトップレベルのキー値のペアを吐き出して、特定の曲名をクリックし、正しい曲のURLを見つけるためにデータをフィルタリングしたいと思っています。

どのようにそのアレイをループしてそれらのオブジェクトをつかむことができますか？

ご協力いただければ幸いです。

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

ソングコンポーネント

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テンプレート

<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

あなたはそれがはい、これが働いていたsomehting

<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>