如何在EmailJS模板中循环显示购物车数组元素

我有一个可能包含多个元素的购物车商品列表，需要通过EmailJS模板在邮件中展示。直接在模板中显示items时，出现了[object Object],[object Object]的结果。我想实现以下格式的商品信息展示：

商品1名称 x 数量 = 价格
商品2名称 x 数量 = 价格

提交函数代码 #

const handleSubmit = () => {
    if (!name || !address || !phoneNumber) {
      return;
    }

    // 获取购物车商品列表
    const cartItems = items.map((item) => {
      return {
        name: item.name,
        quantity: item.quantity,
        price: item.convertedPrice.toFixed(2),
      };
    });

    // 计算购物车商品总价
    const totalPriceFormatted = totalPrice.toFixed(2);

    // 准备邮件模板参数
    const templateParams = {
      name: name,
      phoneNumber: phoneNumber,
      address: address,
      items: cartItems,
      totalPrice: totalPriceFormatted,
    };

    console.log("template params", templateParams);

    emailjs
      .send(
        "XXXX",
        "XXXX",
        templateParams,
        "XXXX"
      )
      .then(
        function (response) {
          console.log("SUCCESS!", response.status, response.text);
          
        },
        function (error) {
          console.log("FAILED...", error);
        }
      );
  };

当前待修改的EmailJS模板代码 #

您收到了一笔新订单

姓名: {{name}}
电话: {{phoneNumber}}
地址: {{address}}

订单详情:

{{items}}

总价: ${{totalPrice}}

EmailJS模板支持Handlebars语法，直接用{{#each}}循环遍历items数组就能生成需要的格式。修改后的模板代码如下：

您收到了一笔新订单

姓名: {{name}}
电话: {{phoneNumber}}
地址: {{address}}

订单详情:

{{#each items}}
{{name}} x {{quantity}} = ${{price}}
{{/each}}

总价: ${{totalPrice}}

说明 #

• {{#each items}} 标记循环的开始，遍历传入的items数组
• 循环内部可以直接通过{{name}}、{{quantity}}、{{price}}访问单个商品对象的属性
• {{/each}} 标记循环的结束

这样就能把每个商品按指定格式渲染出来，不会再出现[object Object]的问题。

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