javascript array looping to a table

Question

I'm trying to make a table with 2 columns, the header is for Names and Salaries, then i'm trying to loop an array with names and another one for salaries, but it doesn't come out in order, they fill the first column only(Name)

<table border="1">
        <thead>
        <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <script>
                var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
                for(var i = 0 ; i < employeeName.length ; i++)
                {
                    document.write("<tr>");
                    document.write("<td>" + employeeName[i] + "</td>");

                }
                var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];
                for(var e = 0 ; e < employeeSalary.length ; e++)
                {

                    document.write("<td>" + employeeSalary[e] + "</td>");
                    document.write("</tr>");
                }


            </script>
        </tbody>
</table>

You should avoid document.write if you can. You should get a reference to the tbody element, build the complete string, then using innerHTML to add that string as the content of the tbody — Get Off My Lawn
– Get Off My Lawn, Commented Jul 22, 2018 at 15:13

score 1 · Accepted Answer · 2018-07-22 19:39:57Z

The main problem is, that you store name and salary in different arrays. It was better to store both values in an object and the objects in one list. But according to your given structure you have to solve it as follows:

<table border="1">
        <thead>
        <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <script>
                var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
                var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];

                for(var i = 0 ; i < employeeName.length ; i++)
                {
                    document.write("<tr>");
                    document.write("<td>" + employeeName[i] + "</td><td>" + employeeSalary[i] + "</td>");
                    document.write("</tr>");
                }


            </script>
        </tbody>
</table>

EDIT

Here is the reply to your enquiry in the comments below. If you want to solve your problem with an array of objects I'd suggest this:

<table border="1">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Salary
            </th>
        </tr>
    </thead>
    <tbody>
        <script>
            const employees = [
                  {name:"Tom", salary:"1000"}, 
                  {name:"John", salary:"1500"}, 
                  {name:"Jack", salary:"2000"}, 
                  {name:"Sam", salary:"5000"}, 
                  {name:"Sarah", salary:"2500"}, 
                  {name:"Rachel", salary:"3000"}, 
                  {name:"Rick", salary:"3500"}, 
                  {name:"Sean", salary:"2500"}, 
                  {name:"Joe", salary:"1750"}
                  ];

            employees.forEach( element => {
                document.write("<tr>");
                document.write("<td>" + element.name + "</td><td>" + element.salary + "</td>");
                document.write("</tr>");
            });
        </script>
    </tbody>
</table>

it worked thanks a lot, would you mind showing me how to do it the way you referred to ?
Here you go. Just added an edit with the formerly suggested object-based solution.

Get Off My Lawn · Accepted Answer · 2018-07-22 15:08:37Z

I would simply map over the array of employees, and create a tr for each one. Next I would append that row to the tbody element.

Doing this will avoid having two loops.

var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];

let employeeInfo = employeeName.map((name, key) => `<tr><td>${name}</td><td>${employeeSalary[key]}</td></tr>`)

document.querySelector('table tbody').innerHTML = employeeInfo.join('')

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Kiran Sripada · Accepted Answer · 2018-07-22 15:12:58Z

If you are trying to have them in column wise, you should have both names and salaries in same loop like below

var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"]; 

var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"]; 

for(var i = 0 ; i < employeeName.length ; i++) 
{ document.write("<tr>");
 document.write("<td>" + employeeName[i] + "</td>"); 
document.write("<td>" + employeeSalary[i] + "</td>");
document.write("</tr>"); 
}

Guilherme Baule · Accepted Answer · 2018-07-22 15:13:45Z

1

let employees = [{name: "Tom", salary: 1000}...]
let table = ["<table>"];
for(let employee of employees) { 
    table.push("<tr>"); 
    table.push("<td>" + employee.name + "</td>"); 
    table.push("<td>" + employee.salary+ "</td>");
    table.push("</tr>"); 
}
table.push("</table>");
document.write(table.join());

answered Jul 22, 2018 at 15:13

Guilherme Baule

1062 bronze badges

Comments

NullPointer · Accepted Answer · 2018-07-22 15:26:53Z

If you want to put name and salary in column then Just iterate through 1 loop. Inside this loop create the new tr and set the value name and salary in new td of this tr.

<table border="1">
        <thead>
        <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <script>
              var employeeSalary = ["1000", "1500", "2000", "5000", "2500", "3000", "3500", "2500", "1750"];
                var employeeName = ["Tom", "John", "Jack", "Sam", "Sarah", "Rachel", "Rick", "Sean", "Joe"];
                for(var i = 0 ; i < employeeName.length ; i++)
                {
                    document.write("<tr>");
                    document.write("<td>" + employeeName[i] + "</td>"); 
                    document.write("<td>" + employeeSalary[i] + "</td>");
                    document.write("</tr>");
                }
              
               


            </script>
        </tbody>
</table>

Collectives™ on Stack Overflow

javascript array looping to a table

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Related