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