如何将 for of 循环转换为 for 循环以解决 ESLint 错误

Question

How do I convert a for of loop into a for loop? This is so that I can avoid/ solve the eslint error message.I have tried googling, but the solution I am getting is to disable/configure eslint. Help me understand what I'm missing. here is the error message. " error iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations "

here is my working code using the for of.

let str = '';
const arr = [];
for (const person of featuredObject) {
  str = `        
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
</div>`;
  arr.push(str);
}

here is my failed implementation of the for loop.

let str = '';
const person = '';
const arr = [];
for (let i = 0; i < featuredObject.length; i += 1) {
  str= `
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
</div>`;
  arr.push(str);
}

Answer 1

let str = "";
const arr = [];
for (let i = 0; i < featuredObject.length; i += 1) {
  const person = featuredObject[i];
  str = `
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
  </div>`;
  arr.push(str);
}

Better way

const arr = featuredObject.map((person) => {
  const str = `
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
  </div>`;
  return str;
});

Answer 2

In for of loop in person is a element of featuredObject, so it as all properties but in for loop person is string not an element featuredObject. I am using div element because if you append a element into another element it preserve all event listener but when you append something into innerHTML it removes all event listener.

const arr = [];
for (let i = 0; i < featuredObject.length; i++) {
  const person = featuredObject[i];
  const div = document.createElement("div");
  div.setAttribute("class", "portfolio");
  div.innerHTML = `
    <img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>`;
  arr.push(div);
}

Answer 3

Use map to generate the new array.

const arr = featuredObject.map((person) => `
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
</div>`);