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

编程问答 2022-06-01

问题描述

对这个有点卡住了。

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

enter image description here

我通过使用 forEach 循环遍历我的对象来做到这一点。 （在这个例子中，我只是控制台。记录我的结果 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 个元素。

谢谢， 蕾娜

解决方法

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

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

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

for-loopforeachjavascriptobjectobjecttemplate-literals