How will you convert this for loop into foreach? here is my code I am practicing template string

Question

I am practicing template string, I can get data from simple array but if you see I have multiple information here, and I want to show it into table. I have successfully done with for loop(see) but I want to try forEach for this.

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

const data =[
  {id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"ansurex@gmail.com"},
  {id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"meet.ind@yahoo.com"},
  {id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"omkara.re@gmail.com"},
  {id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"subh.drama@yahoo.com"}
];

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)

Welcome to Stack Overflow. I suggest trying this out for yourself. Take a look at the examples on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) and see if you can apply them here. If you get stuck, you can ask a question about what exactly you're stuck on. — Heretic Monkey, Jul 23 '18 at 21:50
Possible duplicate of [For-each over an array in JavaScript?](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — Rodrigo Ferreira, Jul 23 '18 at 21:51
While you state you're looking to try out `forEach` I recommend checking out [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), as that's what you're actually doing. — monners, Jul 23 '18 at 22:08

Unmitigated · Answer 1 · 2018-07-23T23:24:19.293

You can use Array.prototype.forEach, which accepts a function with the Array item and Array item's index as a parameter.

 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:"ansurex@gmail.com"},
{id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"meet.ind@yahoo.com"},
{id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"omkara.re@gmail.com"},
{id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"subh.drama@yahoo.com"}
];
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 would work in this case as well (as suggested by stwilz).

 <table id="result"></table>
    <script>
    const data =[
    {id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"ansurex@gmail.com"},
    {id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"meet.ind@yahoo.com"},
    {id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"omkara.re@gmail.com"},
    {id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"subh.drama@yahoo.com"}
    ];
    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>

Even though the question is to show the use of `forEach`, `reduce` would work much better here. ```const template = data.reduce((collection, item, index) => collection + ` ${item.id} ${item.name} ${item.username} ${item.email}`, '')``` — stwilz, Jul 23 '18 at 22:49

How will you convert this for loop into foreach? here is my code I am practicing template string

1 Answers1