UIBakery中API输出转表格列：billingDetails映射报错求助

API输出 #

{
  "invoiceRequests": [
    {
      "orderId": "987654",
      "billingDetails": {
        "firstName": "Eva",
        "surname": "Jans",
        "streetName": "Maasweg",
        "houseNumber": "1",
        "zipCode": "3943",
        "city": "Paris",
        "countryCode": "FR"
      }
    }
  ]
}

尝试的转换代码 #

return [{{data}}].map(item => {
  return {
    Ordernumber: item.invoiceRequests.orderId,
    Firstname: item.invoiceRequests.billingDetails.firstName,
    Surname: item.invoiceRequests.billingDetails.surname,
    Street: item.invoiceRequests.billingDetails.streetName,
    Number: item.invoiceRequests.billingDetails.houseNumber,
    Postalcode: item.invoiceRequests.billingDetails.zipCode,
    Cicty: item.invoiceRequests.billingDetails.city,
    Country: item.invoiceRequests.billingDetails.countryCode,
  };
});

错误信息 #

{
  "name": "Error",
  "message": "item.invoiceRequests.billingDetails is undefined"
}

问题说明 #

我正尝试将API输出的数组映射为可用于表格的结构，能提取仅一层数组深度的orderId，但无法提取两层深度的billingDetails对象，请求帮助。

解决方案 #

问题出在对数据结构的访问逻辑错误，修正后的代码如下：

return {{data}}.invoiceRequests.map(request => {
  return {
    Ordernumber: request.orderId,
    Firstname: request.billingDetails?.firstName,
    Surname: request.billingDetails?.surname,
    Street: request.billingDetails?.streetName,
    Number: request.billingDetails?.houseNumber,
    Postalcode: request.billingDetails?.zipCode,
    City: request.billingDetails?.city,
    Country: request.billingDetails?.countryCode,
  };
});

关键修正点 #

• 直接遍历{{data}}里的invoiceRequests数组，不需要把整个API返回对象包裹成新数组
• 遍历项是invoiceRequests中的单个请求对象，直接通过request访问内部属性
• 用?.可选链操作符避免billingDetails不存在时抛出错误，提升代码健壮性
• 修正原代码里的拼写错误Cicty为City

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