如何在Angular5中使用TypeScript遍历返回对象数组的JSON对象

Hey there! Let's break down how to work with your nested JSON structure in Angular 5 using TypeScript—we'll cover both typing your data properly and iterating over it, both in component logic and your template.

第一步：定义TypeScript接口（强类型约束） #

First, let's create interfaces that match your JSON structure. This gives you type safety and better IDE support, so you won't accidentally access non-existent properties:

// 定义最内层的Product接口（根据实际products结构补充属性）
interface Product {
  id?: number;
  name?: string;
  price?: number;
  // 补充你实际用到的其他商品属性
}

interface Order {
  amount: number;
  term: string;
  payment: number;
  id: number;
  calculationDate: string;
  products: Product[];
}

interface CustomerData {
  secondLastName: string;
  firstLastName: string;
  phoneNumber: string;
  address: string;
  paymentCapacity: number;
  gender: string;
  name: string;
}

interface Customer {
  customerData: CustomerData;
  orders: Order[];
}

// 顶层的响应类型，对应你的JSON结构
interface CustomerResponse {
  Customers: Customer[];
}

第二步：获取并解析JSON数据 #

Next, use Angular's HttpClient to fetch your JSON data (don't forget to import HttpClientModule in your AppModule first!). Here's how to handle this in a component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CustomerResponse, Customer } from './your-interfaces-file'; // 替换成你的接口文件路径

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html'
})
export class CustomerListComponent implements OnInit {
  customers: Customer[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 假设你的JSON来自API接口或本地文件
    this.http.get<CustomerResponse>('assets/customers.json') // 替换成你的数据路径
      .subscribe(response => {
        this.customers = response.Customers;
        // 可选：在组件内部遍历数据做预处理
        this.processCustomerData();
      });
  }

  // 组件内遍历数据的示例（比如做数据统计、转换）
  processCustomerData(): void {
    this.customers.forEach(customer => {
      console.log(`客户名称：${customer.customerData.name} ${customer.customerData.firstLastName}`);
      // 遍历该客户的所有订单
      customer.orders.forEach(order => {
        console.log(`订单ID：${order.id}，金额：${order.amount}`);
        // 遍历订单内的商品
        order.products.forEach(product => {
          console.log(`商品：${product.name}`);
        });
      });
    });
  }
}

第三步：在模板中渲染遍历数据 #

Use Angular's *ngFor directive to loop through the nested arrays in your template. Here's a sample customer-list.component.html:

<div *ngFor="let customer of customers" class="customer-card">
  <h3>{{ customer.customerData.name }} {{ customer.customerData.firstLastName }} {{ customer.customerData.secondLastName }}</h3>
  <p>手机号：{{ customer.customerData.phoneNumber }}</p>
  <p>地址：{{ customer.customerData.address }}</p>

  <h4>历史订单</h4>
  <div *ngFor="let order of customer.orders" class="order-item">
    <p>订单ID：{{ order.id }}</p>
    <p>订单金额：{{ order.amount }}</p>
    <p>计算日期：{{ order.calculationDate | date:'yyyy-MM-dd HH:mm' }}</p>

    <h5>订单商品</h5>
    <ul *ngIf="order.products.length > 0">
      <li *ngFor="let product of order.products">
        {{ product.name }} <!-- 替换成实际商品属性 -->
      </li>
    </ul>
    <p *ngIf="order.products.length === 0">该订单无商品</p>
  </div>
</div>

关键注意事项 #

• 必须导入HttpClientModule: 记得在AppModule的imports数组中添加HttpClientModule，否则HttpClient无法正常使用。
• 异步数据处理: HTTP请求是异步的，所以我们初始化customers为一个空数组，避免模板渲染时出现undefined错误。
• 管道格式化: 模板中用date管道格式化日期，让时间显示更友好，你也可以根据需求自定义其他管道。

内容的提问来源于stack exchange，提问作者Yessica Apale Lara