Как вы преобразуете этот цикл в foreach? вот мой код я практикую шаблон строки

Question

Я практикую шаблонную строку, я могу получить данные из простого массива, но если вы видите, что у меня есть многократная информация здесь, и я хочу показать ее в таблице. Я успешно закончил цикл for(см.), Но я хочу попробовать forEach для этого.

const player_table = document.querySelector('.players');

const data =[
  {id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"[e-mail]"},
  {id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"[e-mail]"},
  {id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"[e-mail]"},
  {id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"[e-mail]"}
];

let template = '';
for( let i = 0; i < data.length; i++ ){
  let info = data[i];
  template += `<tr><td> ${info.id} </td><td> ${info.name} </td><td> ${info.username}</td><td> ${info.email}</td></tr>`
} 

player_table.insertAdjacentHTML("beforeend",template)

Answer 1

Ты можешь использовать Array.prototype.forEach, который принимает function с элементом Array и индексом элемента Array в качестве параметра.

 data.forEach(function(item, index){
   template += `<tr><td> ${item.id} </td><td> ${item.name} </td><td> ${item.username}</td><td> ${item.email}</td></tr>`;
 });

<table id="result"></table>
<script>
var template = "";
const data =[
{id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"[e-mail]"},
{id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"[e-mail]"},
{id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"[e-mail]"},
{id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"[e-mail]"}
];
data.forEach(function(item, index){
       template += `<tr><td> ${item.id} </td><td> ${item.name} </td><td> ${item.username}</td><td> ${item.email}</td></tr>`;
     });
document.getElementById("result").innerHTML = template;
</script>

Array.prototype.reduce будет работать и в этом случае (как предложено stwilz).

 <table id="result"></table>
    <script>
    const data =[
    {id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"[e-mail]"},
    {id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"[e-mail]"},
    {id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"[e-mail]"},
    {id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"[e-mail]"}
    ];
    const template = data.reduce((collection, item, index) => collection + `<tr><td> ${item.id} </td><td> ${item.name} </td><td> ${item.username}</td><td> ${item.email}</td></tr>`, '')
    document.getElementById("result").innerHTML = template;
    </script>