动态生成WhatsApp交互式列表JSON时多对象合并异常问题

需要动态生成WhatsApp交互式列表消息的sections.rows数组，目标JSON结构如下：

"sections": [
    {
        "title": "Main Title",
        "rows": [
            {
                "title": "row 1 title"
            },
            {
                "title": "row 2 title"
            }
        ]
    }
]

列表效果参考：

原有硬编码rows数组的方式灵活性差，尝试通过读取标题数组、展开语法动态生成时，代码返回undefined，无法正确合并生成所有行对象。原有错误代码如下：

async function genJSON() {
    var arr = ['row 1', 'row 2', 'row3']

    let data1, data2, d = {}
    let i = 0
    while (i < arr.length) {
        data1 = JSON.parse(`{"title": "${arr[i]}"}`)
        data2 = JSON.parse(`{"title": "${arr[i + 1]}"}`)
        i++
        d = { ...data1, ...data2 }
    }
    console.log(d)
    catch (e) {
        console.log(e)
    }
        
}
genJSON()

代码运行错误输出参考：

你的代码存在3个核心错误：

• 语法错误：async函数内的try块缺失，直接编写catch逻辑会直接触发语法报错，代码无法正常执行
• 逻辑错误：rows字段要求的格式是对象数组，你使用对象展开语法合并多个同键名（title）的对象时，后生成的对象会直接覆盖前面对象的同名属性，最终只会得到单个对象，完全不符合数组结构要求
• 边界错误：循环执行到数组最后一个元素时，arr[i+1]会取到undefined值，传入JSON.parse会直接触发解析错误

不需要用JSON.parse拼接字符串这种容易出错的写法，直接用数组的map方法遍历标题数组，批量生成行对象即可，代码简洁且不会有注入、边界问题：

async function genJSON() {
  try {
    // 动态传入的标题数组
    const rowTitles = ['row 1', 'row 2', 'row3']
    // 遍历生成符合要求的rows数组
    const rows = rowTitles.map(title => ({ title }))

    // 组装最终的WhatsApp消息结构
    const messageStruct = {
      sections: [
        {
          title: "Main Title",
          rows: rows
        }
      ]
    }

    console.log(messageStruct)
    return messageStruct
  } catch (e) {
    console.log(e)
  }
}

genJSON()

运行后输出的结构完全符合要求：

{
  "sections": [
    {
      "title": "Main Title",
      "rows": [
        {"title": "row 1"},
        {"title": "row 2"},
        {"title": "row3"}
      ]
    }
  ]
}

提示：如果后续需要给列表行添加id、description等字段，直接在map方法的返回对象中补充对应属性即可，示例：(title, idx) => ({id: String(idx), title, description: '行描述文本'})

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