如何将API返回的字符串类型addedInvoiceProductDetails转为可map的对象

架构老林

2026-9-25

问题根因

addedInvoiceProductDetails字段是服务端提前做了JSON序列化后的字符串类型数据，你看到的[]、{}结构只是字符串的文本内容，本质不是JavaScript数组，所以无法直接调用数组的map方法。

解决方案

使用JSON.parse()方法对该字段做反序列化处理，转换为可操作的JavaScript数组即可，示例代码如下：

// 调用接口获取返回数据
const fetchInvoiceData = async () => {
  const res = await fetch('http://127.0.0.1:8000/api/invoice_details/8')
  const responseData = await res.json()
  // 反序列化商品明细字段
  const productDetails = JSON.parse(responseData.addedInvoiceProductDetails)
  // 此时可正常执行map操作
  const formattedList = productDetails.map(product => {
    return {
      商品名称: product.productname,
      购买数量: product.productquantity,
      商品单价: product.productprice,
      商品总价: product.producttotalprice
    }
  })
  console.log('处理后的商品列表', formattedList)
}

异常兼容处理

为避免字段为空、JSON格式异常导致程序报错，建议添加异常捕获逻辑：

let productDetails = []
try {
  productDetails = JSON.parse(responseData.addedInvoiceProductDetails)
  // 额外校验是否为数组，避免服务端返回非数组的JSON结构
  if (!Array.isArray(productDetails)) {
    productDetails = []
  }
} catch (e) {
  console.error('商品明细解析错误：', e)
  productDetails = []
}