如何在 Angular 6 的服务调用中读取嵌套的 JSON 对象答案

【问题标题】：How to read nested JSON Objects in a service call in Angular 6如何在 Angular 6 的服务调用中读取嵌套的 JSON 对象
【发布时间】：2019-12-15 05:28:14
【问题描述】：

我在 API 端点有一个嵌套的 JSON 对象，如下所示

[
  {
    "id": "order-1",
    "recipient": {
      "name": "John Smith",
      "email": "j.smith@notgmail.com"
    },
    "created_at": "2018-11-01T09:42:30Z",
    "items": [
      {
        "id": "item-1",
        "name": "Supersoaker 3000",
        "quantity": 2,
        "total_price": {
          "currency": "EUR",
          "amount": "24.33"
        }
      },
      {
        "id": "item-2",
        "name": "Nunchucks XXX",
        "quantity": 1,
        "total_price": {
          "currency": "EUR",
          "amount": "39.99"
        }
      }
    ],
    "delivery": {
      "courier": "DPP",
      "method": "Express"
    },
    "charge_customer": {
      "currency": "EUR",
      "total_price": "18.00"
    }
  }
]

我正在尝试调用 order-results-service.ts 中的服务以从 api 获取嵌套对象，如下所示：

  getOrderResult(): Observable <IOrder[]>{
    this.getSubmitCriteria();
    return this.http.get<serverData>(this.url, this.submitCriteria)
      .pipe(map(res => <IOrder[]>res.orders),
        catchError(this.handleError('getOrderResult',[])));

  }

我在 interface.ts 中定义如下 IOrder[] 接口：

interface Recepient {
    name?: string;
    email?: string;
}

interface Delivery {
    courier?: string;
    method?: string;

}

interface totalPrice {
    currency?: string;
    total_price?: number;
}
interface Items {
    id?: string;
    name?: string;
}

export interface IOrder {
  recepient: Recepient[];
  totalPrice: totalPrice[];
  createdDate: string;
  items: Items[];
  deliveryDetails: Delivery[]; 
}

在 order.component.ts 中，我正在调用如下服务：

 ngOnInit() {
    this.loadData();

  }

  loadData(){
      this.orderResultsService.getOrderResult().subscribe((data: IOrder[]) =>   {        

          this.orders = data;

      }), error => {
        this.errormsgs = [{ severity: 'error', detail: 'error'}];
      }
  }

但是当我订阅 observable 时，我无法从组件中的 JSON 对象获取值。我得到了服务中的价值。我还需要有关如何在前端显示数据对象的帮助。我尝试使用 PrimeNG 并在 html 中使用 *ngFor，如下所示：

<div *ngFor="let order of orders">
    <div *ngFor="let x of order.recipient">
        <strong>Recipient Name:</strong>{{x.name}}
        <strong>Recipient Email Address:</strong>{{x.email}}
    </div>
    <div *ngFor="let y of order.items">
        <strong>Item Id:</strong>{{y.id}}
        <strong>Item Name:</strong>{{y.name}}
    </div>
    <div>
        <strong>Time when order was made:</strong>{{order.created_at}}
    </div>
    <div *ngFor="let z of order.delivery">
        <strong>Courier Name:</strong>{{z.courier}}
        <strong>Courier Method:</strong>{{z.method}}
    </div>
    <div *ngFor="let p of order.charge_customer; let i =index">
        <strong>Total Price of the Order:</strong>{{p.amount}}{{p.currency}}
    </div>
</div>

但我无法在前端或服务中获取值。我在这里做错了什么？

【问题讨论】：

标签： json object service nested angular6

【解决方案1】：

使用它来提取值。例子 - data["recipient"].name 和 data["recipient"].email 并将其放入变量中。像这个例子一样只尝试提取数据。

【讨论】：