如何在JS(ES6)中修改POST请求数据以匹配目标格式？

你需要把从表单收集到的扁平数据，转换成API预期的那种嵌套结构对吧？其实不用纠结Array.prototype.map（毕竟这是单个对象的结构转换，不是数组遍历处理），直接手动构造每个字段的嵌套格式就很清晰，或者封装个小工具函数来减少重复代码，两种方案都给你参考：

方案一：直接手动构造结构 #

这是最直观的方式，适合字段不多的情况：

// 先收集表单原始数据
const field_date_cost = document.querySelector('#edit-date').value;
const field_amount = document.querySelector('#edit-amount').value;
const field_details = document.querySelector('#edit-details').value;
const type = "expense";

// 按照API要求的格式构造数据
const formattedData = {
  type,
  field_date_cost: {
    und: [{
      value: {
        date: field_date_cost
      }
    }]
  },
  field_amount: {
    und: [{
      value: field_amount
    }]
  },
  field_details: {
    und: [{
      value: field_details
    }]
  }
};

方案二：封装工具函数（适合字段较多的场景） #

如果之后要处理更多类似结构的字段，封装两个小函数可以避免重复代码：

// 处理普通字段的通用函数
function formatRegularField(value) {
  return {
    und: [{ value }]
  };
}

// 处理日期字段的专用函数（因为日期需要多一层date嵌套）
function formatDateField(dateValue) {
  return {
    und: [{ value: { date: dateValue } }]
  };
}

// 收集原始数据
const field_date_cost = document.querySelector('#edit-date').value;
const field_amount = document.querySelector('#edit-amount').value;
const field_details = document.querySelector('#edit-details').value;
const type = "expense";

// 用工具函数快速构造格式正确的数据
const formattedData = {
  type,
  field_date_cost: formatDateField(field_date_cost),
  field_amount: formatRegularField(field_amount),
  field_details: formatRegularField(field_details)
};

简单解释一下逻辑 #

• 你的API要求每个字段都要包裹在und数组里，数组里是一个包含value的对象；
• 日期字段特殊一点，value里面还要再嵌套一层date属性来存日期值；
• 金额和详情字段的value直接对应表单收集到的原始值就好。

这样转换后的formattedData就完全符合API预期的请求体格式啦～

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