如何将内部JSON分配给Promise中的对象？

Question

In Angular2 "Tour of Heroes" tutorial it is shown how to assign JSON to variable inside a promise. What if my JSON is complex:

JSON:

let complexMessage = [{
      "heroes":[
      {id: 11, name: 'Mr. Nice'},
      {id: 12, name: 'Narco'},
      {id: 13, name: 'Bombasto'},
      {id: 14, name: 'Celeritas'},
      {id: 15, name: 'Magneta'},
      {id: 16, name: 'RubberMan'},
      {id: 17, name: 'Dynama'},
      {id: 18, name: 'Dr IQ'},
      {id: 19, name: 'Magma'},
      {id: 20, name: 'Tornado'}
      ]
      ,"numHeroes": 9
      ,"messages":[
        {message: "aaa", args:[]},
        {message: "bbb", args:[]}
      ]
    }];

The following Typescript doesn't work for multidimensional JSON:

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json())
               .catch(this.handleError);

and then:

getHeroes() {
    this.heroService
        .getHeroes()
        .then(heroes => this.heroes = heroes)
        .catch(error => this.error = error);
  }

Does anyone know how to assign inner "heroes" to this.heroes? (the original code is at https://angular.io/docs/ts/latest/tutorial/toh-pt6.html )

Answer 1

if you just want to receive the heroes from this json you can do it like this:

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json()[0].heroes)
               .catch(this.handleError);

Answer 2

Just assign the heroes array not full response to the this.heroes you will get whatever you want, or as alternate just send desired array at the time of http call, try this one-

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json())
               .catch(this.handleError);

getHeroes() {
    this.heroService
        .getHeroes()
        .then(heroes => this.heroes = heroes[0].heroes) // here take first key of array and you will get heroes as return
        .catch(error => this.error = error); 
  }