Angular2 将嵌套 json 数组映射到模型

# Angular 2中映射嵌套JSON数组到模型的方法与案例

json
{
  "id": 1,
  "name": "John Doe",
  "orders": [
    {
      "orderId": "A001",
      "product": "Laptop",
      "quantity": 2
    },
    {
      "orderId": "A002",
      "product": "Smartphone",
      "quantity": 1
    }
  ]
}

typescript
// user.model.ts
export class User {
  id: number;
  name: string;
  orders: Order[];
}
// order.model.ts
export class Order {
  orderId: string;
  product: string;
  quantity: number;
}

typescript
// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from './user.model';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/users';
  constructor(private http: HttpClient) { }
  getUsers(): Observable {
    return this.http.get(this.apiUrl)
      .pipe(
        map(users => users.map(user => this.mapToUserModel(user)))
      );
  }
  private mapToUserModel(data: any): User {
    const user = new User();
    user.id = data.id;
    user.name = data.name;
    user.orders = data.orders.map(order => {
      const mappedOrder = new Order();
      mappedOrder.orderId = order.orderId;
      mappedOrder.product = order.product;
      mappedOrder.quantity = order.quantity;
      return mappedOrder;
    });
    return user;
  }
}

typescript
// user.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  users: User[];
  constructor(private dataService: DataService) { }
  ngOnInit() {
    this.dataService.getUsers().subscribe(users => {
      this.users = users;
    });
  }
}