For循环一个数字以在模板文字中创建按钮

Question

这个有点卡住了。

我正在遍历一个对象 (dataLayer.Tests) 并在 DIV 中显示我的内容的值。这是此对象的外观示例：

我通过使用 forEach 遍历我的对象来做到这一点。（在这个例子中，我只是 console.logging 我的结果 result3）。

我遇到的问题是，在我的 forEach 中，我想显示 create/display 按钮，具体取决于 totalVariants [=45= 中的数字].

例如，如果 totalVariants === 2，我想创建 2 个按钮。如果是一个，我想创建1个按钮。

我知道我需要循环遍历这个特定值，但我不确定如何在模板文字中执行此操作。

这是我的代码。

dataLayer.Tests.forEach((element, index, array) => {
      let result3 = '';

      let numberOfVariants = element.totalVariants;

      if (numberOfVariants >= 1) {

        for (i = 0; i < numberOfVariants; i++) {
          console.log("The number is ", i + 1);
        }

        result3 += `
        <div class="CRO-variant-result">
          <p>Date Launched: ${element.date}</p>
          <p>Test ID: ${element.id}</p>
          <p>Test Description: ${element.name}</p>
          <p>Variant Active: ${element.variant}</p>
          <p>Total Variants: ${element.totalVariants}</p>

          ${(function () {
            for (i = 0; i < element.totalVariants; i++) {
              return `<button>${i}</button>`
            }
        })()} 
        </div>
       `
       console.log("result3", result3);

      };
    });

我见过包括 .map 和 object.keys 在内的解决方案，但这似乎 work/return 什么都没有。（可能因为我只需要遍历一个数字而不是数组等

任何 ideas/pointers，将不胜感激。

基本上，我不确定如何在模板文字和 return x 个元素中循环遍历数字。

谢谢，瑞娜

Answer 1

numberOfVariants 是一个 number，而不是 object，所以你可以这样做的一种方法是创建一个新的该长度的递增数组（Array.from(Array(numberOfVariants).keys()) 这样做很好）然后 map 在你正在做的那个数组上。

${Array.from(Array(numberOfVariants).keys()).map(i => (
  `<button value="${i}">${i}</button>`
)).join('')}

我不太确定你想在按钮内显示什么（可能是你递增时当前数字的整数）？

For循环一个数字以在模板文字中创建按钮

For loop a number to create buttons inside template literal

javascript

foreach

for-loop

object

template-literals