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

Question

有点卡住这个。

我正在循环一个对象 (dataLayer.Tests)，并在 DIV 中显示我的内容的值。下面是这个对象的外观示例：

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

我遇到的问题是，在我的forEach 中，我想显示创建/显示按钮，具体取决于totalVariants 键/值中的数字。

例如，如果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 的解决方案，但这似乎不起作用/返回任何东西。 （可能因为我只需要循环一个数字而不是数组等。

任何想法/指针，将不胜感激。

基本上，我不确定如何在模板文字中循环一个数字并返回 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('')}

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