将数组加入JSON并通过AJAX添加购物车时请求失败的问题排查

问题原因分析 #

你的核心问题出在数组嵌套不符合接口数据格式要求：

• crossSellArray本身就是一个存储多个商品对象的数组，当你写[crossSellArray, product]时，最终生成的items是数组嵌套数组的结构，示例如下：

  [
    [{id: '商品1ID', quantity:1}, {id:'商品2ID', quantity:1}], // crossSellArray作为子数组存在
    {id:'主商品ID', quantity:1} // 主商品对象
  ]
  

• 而购物车接口要求items必须是一维数组，每个元素都是单个的商品对象，嵌套数组会导致接口无法解析数据，因此请求失败。
• 当你改用crossSellArray[0]时，实际是取出了数组里的第一个商品对象，此时items变成一维数组，符合接口格式要求，所以请求正常。

解决方法 #

使用数组扩展运算符（...）将crossSellArray的元素展开，和product合并成一个一维数组，修改AJAX请求中的items部分即可：

const response = await fetch(
  `${window.themeVariables.routes.cartAddUrl}.js?sections=mini-cart`,
  {
    body: JSON.stringify({
      items: crossSellSelected
        ? [...crossSellArray, product] // 展开crossSellArray元素，与product组成一维数组
        : [product],
      attributes: {
        _ttp: getCookie("_ttp"),
        ttclid: getCookie("ttclid"),
      },
    }),
    method: "POST",
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      "Content-Type": "application/json",
    },
  },
);

修改后，若crossSellArray包含多个商品，最终items的结构会是：

[
  {id: '商品1ID', quantity:1},
  {id:'商品2ID', quantity:1},
  {id:'主商品ID', quantity:1}
]

完全符合接口对items的格式要求，即可实现批量添加所有选中的关联商品和主商品到购物车。

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