Angular2 (rc.6) JSON object keys not being accessed

Question

I'm starting my first Angular2 (rc.6) project. I have a JSON object successfully being sent to a component but I cannot access its keys values in the template.

SERVICE (excerpt):

@Injectable()
export class SongService {
  constructor(private http: Http) { }

  getSong(id: number): Promise<Song> {
    let url = '/maxapirest/v1/maxmusic/song/'+id
    console.log(url)
    return this.http
      .get(url)
      .toPromise()
      .then(function(response) {
          console.log(response.json());
          return response.json();
      } )
  }

COMPONENT (excerpt):

@Component({ 
  selector: 'my-song-reading',
  templateUrl: STATIC_URL+'song-reading.component.html',
  providers: [ SongService ],
})  

export class SongReadingComponent implements OnInit {
  song: Promise<Song>;
  constructor(
    private songService: SongService,
    private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
      if (params['id'] !== undefined) {
        let id = +params['id'];

        this.song = this.songService.getSong(id)
      }
    });

  }

~

TEMPLATE (excerpt):

<div *ngIf="song">
    {{ song | async | json }}<br/><br/><br/>
    {{ song.title | async}}
    {{ song.image | async }}
    {{ song.id | async}}
</div>

The issue I cannot figure out is that {{ song | json }} correctly outputs a JSON object: { "id": 71, "title": "It Don't Mean A Thing" ... } And no error is thrown. But the other var keys are not rendered whatsoever.

Any ideas?

do you get anything ?check with console.log(this.song)?

micronyks
– micronyks

2016-09-12 18:06:55 +00:00
Commented Sep 12, 2016 at 18:06 — micronyks
– micronyks, Commented Sep 12, 2016 at 18:06

Günter Zöchbauer · Accepted Answer · 2016-09-12 18:05:07Z

1

You need to use .then(...) and then assign the value there:

  ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
      if (params['id'] !== undefined) {
        let id = +params['id'];

        this.songService.getSong(id)
        .then(json => {
          this.song = json;
        });
      }
    });
  }

answered Sep 12, 2016 at 18:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cruclax Over a year ago

Exactly. Thanks! I wasn't taking in account the Promise cycle... Of course I also had to change song: Promise<Song>; to song: {};

Collectives™ on Stack Overflow

Angular2 (rc.6) JSON object keys not being accessed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related