Flutter中如何在POST API请求里提交包含数组的JSON参数

你只需要按照JSON结构，将数组对应为Dart的List类型，数组内的对象对应为Map<String, dynamic>类型逐层构造即可，具体实现如下： #

1. 核心实现逻辑 #

假设你已经有两个选中数据的存储变量：

• selectedServices：用户选中的服务列表，每项包含服务uuid和对应服务人员uuid
• selectedPackages：用户选中的套餐列表，每项包含套餐uuid和套餐内包含的服务列表
  补全后的参数构造代码如下：

var bookingData = {
    "branch_uuid": widget.branchListData['uuid'].toString(), 
    "date":"${widget.selectedDate}-${widget.selectedMonthInNum}-${widget.selectedYear}",
    "time": "${widget.choosedTime}",
    // 构造services数组
    "services": selectedServices.map((item) {
      return {
        "uuid": item.serviceUuid,
        "staff_uuid": item.staffUuid
      };
    }).toList(),
    // 构造带嵌套子数组的packages数组
    "packages": selectedPackages.map((pkg) {
      return {
        "uuid": pkg.packageUuid,
        "services": pkg.includedServices.map((pkgService) {
          return {"uuid": pkgService.serviceUuid};
        }).toList()
      };
    }).toList(),
    // 其余字段按需补充
    "remarks": "",
    "tax": 100,
    "discount": 400,
    "coupon": "SALE100"
};

2. 硬编码测试示例 #

如果你需要先写死数据测试接口通断，可以直接按照结构赋值：

var bookingData = {
    "branch_uuid": widget.branchListData['uuid'].toString(), 
    "date":"${widget.selectedDate}-${widget.selectedMonthInNum}-${widget.selectedYear}",
    "time": "${widget.choosedTime}",
    "services": [
        {
            "uuid": "63e1e00f-5af4-4ae2-9fca-4f3e0a9cd420",
            "staff_uuid": "e29b9e3a-0d28-472a-ae27-c372b4ca1a89"
        },
        {
            "uuid": "674d978a-0d88-4374-b915-9c42630f6aa7",
            "staff_uuid": "3a211faf-938b-4220-8288-dfe860ed3b13"
        }
    ],
    "packages": [
        {
            "uuid": "ba88f33f-9a48-4cf1-b55c-45ccce6e7253",
            "services": [
                {"uuid": "63e1e00f-5af4-4ae2-9fca-4f3e0a9cd420"},
                {"uuid": "674d978a-0d88-4374-b915-9c42630f6aa7"}
            ]
        },
        {
            "uuid": "4de60d34-526b-4ac2-9df4-34876f58e39d",
            "services": [
                {"uuid": "674d978a-0d88-4374-b915-9c42630f6aa7"}
            ]
        }
    ],
    "remarks": "",
    "tax": 100,
    "discount": 400,
    "coupon": "SALE100"
};

注意事项 #

构造完成后直接将bookingData作为请求体传给dio、http等网络库的请求参数即可，无需手动做JSON序列化，网络库会自动处理格式转换。

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