React中如何将嵌套对象转换为单一对象（Strapi关联数据处理）

针对Strapi返回的嵌套关联数据，可通过以下JavaScript代码将其转换为你需要的扁平对象数组：

转换代码示例 #

// strapiData 为Strapi返回的原始数据数组（通常对应响应中的data字段）
const transformedData = strapiData.map(item => {
    // 处理商品详情关联数据
    const itemDetail = item.attributes.item_detail?.data 
        ? {
              id: item.attributes.item_detail.data.id,
              ean: item.attributes.item_detail.data.attributes.ean,
              isbn: item.attributes.item_detail.data.attributes.isbn,
              sku: item.attributes.item_detail.data.attributes.sku,
              upc: item.attributes.item_detail.data.attributes.upc
          }
        : {};

    // 处理单位关联数据
    const newUnit = item.attributes.item_dimension?.data?.attributes.new_unit?.data
        ? {
              id: item.attributes.item_dimension.data.attributes.new_unit.data.id,
              unit_name: item.attributes.item_dimension.data.attributes.new_unit.data.attributes.unit_name,
              unit_value: item.attributes.item_dimension.data.attributes.new_unit.data.attributes.unit_value
          }
        : {};

    // 处理商品尺寸关联数据
    const itemDimension = item.attributes.item_dimension?.data
        ? {
              id: item.attributes.item_dimension.data.id,
              height: item.attributes.item_dimension.data.attributes.height,
              weight: item.attributes.item_dimension.data.attributes.weight,
              new_unit: newUnit
          }
        : {};

    // 组装目标格式对象
    return {
        id: item.id,
        item_name: item.attributes.item_name,
        item_type: item.attributes.item_type,
        is_returnable: item.attributes.is_returnable,
        item_detail: itemDetail,
        item_dimension: itemDimension
        // 若有其他字段，可在此处继续添加
    };
});

关键说明 #

• 上述代码基于Strapi v4的返回结构（关联数据嵌套在data和attributes中），若你使用Strapi v3，需调整字段路径（v3关联数据无外层data包裹）。
• 代码中加入了可选链操作符?.处理关联数据为空的情况，避免出现运行时错误，你可根据实际需求修改空值处理逻辑（比如返回null或默认值）。
• 若需要转换更多字段，只需按照相同逻辑提取对应嵌套层级的数据即可。

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