如何在 angular 2 中获取复杂的数据 json 响应？

Question

我有一个预订列表页面。我试图从 json 文件中获取数据。在 第一种格式 中得到结果，但 第二种格式 数据没有得到。我在下面解释了两种格式。请帮我解决这个问题。我已经在 plunker 中添加了我的代码。

第一

    [
       {"_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 中 -> testData.json

应用 -> 预订 -> 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

您的 plunker 有错误，但您需要更正您的服务实现以及您在 angular2 中使用它的方式。

更改booking.service.ts代码，如：

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

和 booking.component.ts 中的代码，例如：

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

Answer 2

您应该考虑使用 subscribe 而不是 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);
    }

如何在 angular 2 中获取复杂的数据 json 响应？

How can get data complicated json response in angular 2?

angular2-services

angular