How to convert for of loop into a for loop to solve the ESLint error

June 23, 2022

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);
}

>Solution :

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;
});