How to make table with javascript loop put the data?

Question

I have the data inside the javascript variable and i want to out put its' data as table. I can do that with text box. but i can't make it correctly in table.

For example table : 
user_id  |  start_time  | end_time
user_id  |  start_time  | end_time
user_id  |  start_time  | end_time

I want to make loop through with like above table. I've the data inside looping. For now i made, the result output as

user_id | user_id | user_id 
start_time | start_time | start_time
end_time | end_time | end_time

I don't want that result. Please help me. I'm noob.

Here is my javascript code.

function getdata(result){

    console.log(result);

    var obj = JSON.parse(result);
            //alert(obj.status);
            //alert(result);
             var str = "";
             var str2 = "";
            var user_id = [];
            var start_time = [];
            for (i = 0; i < obj.data.length; i++) {
               user_id[i] = obj.data[i].user_id;
               start_time[i] = obj.data[i].start_time;

               str += "<input type='text' id='txtNum"+[i]+"' value='"+user_id[i]+"' /> <br/>";

            }
            document.getElementById("admin_id").innerHTML = str;


}

http://stackoverflow.com/questions/27594957/how-to-create-a-table-using-a-loop — Shafiqul Islam, Mar 03 '17 at 08:12
http://stackoverflow.com/questions/22042161/creating-table-using-for-loop-in-javascript — Shafiqul Islam, Mar 03 '17 at 08:12
I already tested with both of them. It's didn't work. That's why i ask this question as new. bro . thanks for your reply — Kyaw Zin Wai, Mar 03 '17 at 08:20

Tienou · Accepted Answer · 2017-03-07T07:33:12.087

1

i hope this will help you out:

var data = [{ id: 1, start_time: new Date(), end_time: new Date() },{ id: 1, start_time: new Date(), end_time: new Date() },{ id: 1, start_time: new Date(), end_time: new Date() }]

var str = "";
for (var i = 0; i < data.length; i++) {
 str += "<tr>";
 str +=   "<td>"+ data[i].id +"</td>";
 str +=   "<td>"+ data[i].start_time +"</td>";
 str +=   "<td>"+ data[i].end_time +"</td>";
 str += "</tr>";
}
document.querySelector('tbody').innerHTML = str;

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>start_time</th>
      <th>end_time</th>
    </tr>
   <thead>
   <tbody>
   </tbody>
 </table>

If you feel fancy you could also use some ES6:

str = data.map(d => `
  <tr>
    <td>${d.id}</td>
    <td>${d.start_time}</td>
    <td>${d.end_time}</td>
  </tr>
`).join('');

edited Mar 07 '17 at 07:33

answered Mar 03 '17 at 08:22

Tienou

700
6
17

thanks bro. but i don't understand document.querySelector('tbody').innerHTML = str; what is querySelector ? And i did as u said and table now showing bro. Help me please. – Kyaw Zin Wai Mar 03 '17 at 08:34
If you run the code-snippet, the table will show up. querySelector: https://developer.mozilla.org/de/docs/Web/API/Document/querySelector – Tienou Mar 03 '17 at 08:36
And then how can i use in my table using by Table ID? I'm noob bro. Please guide me. :( – Kyaw Zin Wai Mar 03 '17 at 08:37
So in your HTML-Markup you have a table. like so: `
` in that table you have a `` element. Now you can select that with `document.querySelector('#myTable tbody');` – Tienou Mar 03 '17 at 08:40
I got it bro. Thanks alot brother. – Kyaw Zin Wai Mar 03 '17 at 08:55
Great, glad to help! – Tienou Mar 03 '17 at 09:03

How to make table with javascript loop put the data?

1 Answers1