For 循環一個數字以在模板文字內創建按鈕

Question

有點堅持這個。

我正在循環通過 object ( dataLayer.Tests )，並在 DIV 中顯示我的內容的值。 這是 object 外觀的示例：

我通過使用forEach遍歷我的 object 來做到這一點。 （在這個例子中，我只是 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('')}

我不太確定您想在按鈕內顯示什么（隨着您的增加，可能是當前數字的 integer）？