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;


}

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
– Kyaw Zin Wai, Commented Mar 3, 2017 at 8:20

Tienou · Accepted Answer · 2017-03-07 07:33:12Z

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 7, 2017 at 7:33

answered Mar 3, 2017 at 8:22

Tienou

7206 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kyaw Zin Wai Over a year ago

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.

Tienou Over a year ago

If you run the code-snippet, the table will show up. querySelector: developer.mozilla.org/de/docs/Web/API/Document/querySelector

Kyaw Zin Wai Over a year ago

And then how can i use in my table <tbody> using by Table ID? I'm noob bro. Please guide me. :(

Tienou Over a year ago

So in your HTML-Markup you have a table. like so: <table id="myTable"></table> in that table you have a <tbody></tbody> element. Now you can select that with document.querySelector('#myTable tbody');

Kyaw Zin Wai Over a year ago

I got it bro. Thanks alot brother.

|

Collectives™ on Stack Overflow

How to make table with javascript loop put the data?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related