Angular中如何将多模型格式化为指定结构的HTTP POST请求

需要将Address、Payment、Item三个Angular模型，加上id变量，组合成指定结构的JSON作为POST请求体，但使用Object.assign的写法无法实现，以下是解决方案：

指定的目标JSON结构 #

{ 
"id": 12,
"address":{
    "firstName": "john",
    "lastName": "doe",
    "address": "testaddress",
    "country": "us",
    "apartmentNo": "12",
    "state": "ohio",
    "city": "washington",
    "zipcode": "45133"
},
"payment":{
    "cardHolder": "jane doe",
    "cardNumber": "1234123412341234",
    "expirationDate": "10/22",
    "cvv": "123"
},
"items":[
    {
        "id":1234,
        "name": "basketball",
        "price": 15,
        "imageUrl": "imageurl",
        "quantity": 0,
        "inventory": 100
    },
    {
        "id":1235,
        "name": "football",
        "price": 25,
        "imageUrl": "imageurl",
        "quantity": 0,
        "inventory": 100
    }
  ]
}

现有模型定义 #

Address模型 #

export class Address {
address!: String;
firstName!: String;
lastName!: String;
country!: String;
apartmentNo!: String;
state!: String;
city!: String;
zipcode!: String;
}

Payment模型 #

export class Payment {
cardHolder!: String;
cardNumber!: String;
expirationDate!: String;
cvv!: String;
}

Item模型 #

export class Item{
id!:number;
name!:string;
price!:number;
imageUrl!:string;
quantity?:number;
inventory!:number;
}

当前无效代码 #

this.paymentInfoService.setPaymentInfo(this.payment);
this.orderId = "1";
this.address = this.shippingService.getShippingInfo();
this.cart = this.cartService.getCart();
this.cartJSON = JSON.stringify({cart: this.cart}); //not using this right now
this.fullPost = Object.assign({"id": this.orderId}, this.address, this.payment, 
this.cart);
this.apiService.sendOrder(this.fullPost).subscribe(
  (response) => console.log(response),
  (error) => console.log(error)
);

问题原因 #

Object.assign会将多个对象的顶层属性直接合并到目标对象中，导致address的firstName、lastName等属性直接出现在fullPost的根层级，而不是嵌套在address字段下；同理payment的属性也会平铺，cart数组也会被错误合并，完全不符合目标JSON的嵌套结构。

解决方案 #

直接通过对象字面量构造符合要求的请求体，明确指定每个嵌套字段：

this.paymentInfoService.setPaymentInfo(this.payment);
this.orderId = 1; // 改为数字类型，匹配目标结构的id类型
this.address = this.shippingService.getShippingInfo();
this.cart = this.cartService.getCart(); // 确保cart是Item[]类型

// 构造符合结构的请求体
this.fullPost = {
  id: this.orderId,
  address: this.address,
  payment: this.payment,
  items: this.cart
};

this.apiService.sendOrder(this.fullPost).subscribe(
  (response) => console.log(response),
  (error) => console.log(error)
);

注意事项 #

• 确保orderId是数字类型（目标结构中id为number，原代码中是字符串"1"，需修正）；
• 确认this.cart返回的是Item[]类型，对应目标结构的items数组；
• 如果需要过滤或转换cart中的数据（比如处理quantity可选属性），可以提前对数组做映射处理，例如：

  items: this.cart.map(item => ({
    ...item,
    quantity: item.quantity ?? 0 // 给可选属性设置默认值
  }))
  

内容的提问来源于stack exchange，提问作者Ben Whitley