角度2でデータを複雑なjson応答にするにはどうすればよいですか？

Question

私は予約リストページを持っています。私はjsonファイルからデータを取得しようとしました。 最初の形式結果が得られますが、の第2の形式のデータが得られません。私は以下の2つの形式について説明しました。この問題を解決するために私を助けてください。私はプランナーに自分のコードを追加しました。 > testData.json

-

Plunker Link

まず

[ 
     {"_id": "57ee4e32f8f888dc11000029", "cabinname": "Foo", "user": "5818355ad2ae67e505431d5b" 
     }, 
     {"_id": "57f22cf3f8f888800c000030", "cabinname": "Joo", "user": "5818355ad2ae67e505431d5b" 
     }, 
     { "_id": "57f22cf3f8f888800c000031", "cabinname": "Maria", "user": "5818355ad2ae67e505431d5b" 
     }, 
     { 
     "_id": "57f22cf3f8f888800c000032", "cabinname": "Peter", "user": "5818355ad2ae67e505431d5b" 
     }, 
     {"_id": "57f22cf3f8f888800c000033", "cabinname": "Declan", "user": "5818355ad2ae67e505431d5b" 
     } 
    ] 

セカンド

{ 
    "bookingDetails": { 
    "data": [ 
     {"_id": "57ee4e32f8f888dc11000029", "cabinname": "Foo", "user": "5818355ad2ae67e505431d5b" 
     }, 
     {"_id": "57f22cf3f8f888800c000030", "cabinname": "Joo", "user": "5818355ad2ae67e505431d5b" 
     }, 
     { 
     "_id": "57f22cf3f8f888800c000031", "cabinname": "Maria", "user": "5818355ad2ae67e505431d5b" 
     }, 
     { 
     "_id": "57f22cf3f8f888800c000032", "cabinname": "Peter", "user": "5818355ad2ae67e505431d5b" 
     }, 
     { 
     "_id": "57f22cf3f8f888800c000033", "cabinname": "Declan", "user": "5818355ad2ae67e505431d5b" 
     } 
    ] 
    } 
} 

JSONファイルは、apidataにoncludedされます

アプリ - >予約 - > booking.service.ts

getBooking(): Promise<Bookings[]> { 
     return this.http.get(this._url) 
      .toPromise() 
      .then(response => response.json() as Bookings[]) 
      .catch(this.handleError); 
    } 

アプリ - >予約 - > booking.component.ts

export class BookingComponent implements OnInit { 
    bookings: Bookings[]; 
    constructor(private employeeService: BookingService) {} 
    getBooking(): void { 
     /*this.employeeService.getEmployee().then(employees => this.employees = employees);*/ 
     this.employeeService.getBooking().then(bookings => this.bookings = bookings); 
    } 
    ngOnInit(): void { 
     this.getBooking(); 
    } 
} 

Answer 1

あなたはsubscribeを使用してになります。のようなbooking.component.tsで

getBooking(): Promise<Bookings[]> { 
     return this.http.get(this._url) 
      .map(response => response.json().bookingDetails.data as Bookings[]) 
      .catch(this.handleError); 
    } 

やコード、 promiseの代わりに。 しかし、あなたが約束を使用する場合は、あなたのbooking.service.ts

getBooking(): Promise<Bookings[]> { 
     return this.http.get(this._url) 
      .map(response => response.json().bookingDetails.data as Bookings[]) 
      .toPromise() 
      .catch(this.handleError); 
    } 

にファイルを変更します

Answer 2

あなたplunkerにエラーがありますが、あなたあなたのサービスの実装とそれを消費する方法を修正する必要がありますangular2。

変更booking.service.tsコード、のような：

this.employeeService.getBooking().subscribe(bookings => this.bookings = bookings);