Λήψη Εμφωλευμένων Δεδομένων Από Αντικείμενο JSON στο Angular 2

Γεια σου, φτιάχνω κάτι παρόμοιο με μια εφαρμογή αναπαραγωγής μουσικής. Έχω στήσει μια υπηρεσία που τραβάει τα δεδομένα από ένα αρχείο JSON που έχω σε ένα fixture. Μπορώ να πάρω όλα τα δεδομένα κορυφαίου επιπέδου με *ngFor αλλά μόλις αρχίσω να ζητάω κάτι σαν songs.parts.name αυτό εμφανίζεται ως undefined.

Έχω το *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"
          }
        }
      ]
    }
  ]
}

Τραγούδια.Υπηρεσία.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>

Απάντηση #1

Μπορείτε να χρησιμοποιήσετε τον Τελεστή Ασφαλούς Πλοήγησης

Φαίνεται ότι μπορεί να το είχες ή ήσουν κοντά στο να το έχεις, δεν θα έπρεπε να είναι κάτι σαν

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