Set JSON values to HTML Table in Java Script?

Question

 function loadUserTable(userType){
          $.ajax({
                type: "POST",
                url: "loadUserTable.html",
                data: "userType=" + userType,
                success: function(response){

                    alert(response);

                }, 
          });   
}

Im still working on it, I print alert for output and got as below

 [{
        "userId":1,
        "email":"santosh.jadi95@gmail.com",
        "mobile":"9900082195",
        "gender":"male",
        "qualification":"1",
        "dob":"2016-01-01",

        "login":{
            "loginId":1,
            "userName":"santosh", 
            "password":"santosh",
            "userType":"admin"
        }
    }]

I want the above JSON values in an HTML Table, is it Possible? If yes, then i just want to know that, how it can be done?

http://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table have you even researched ? — thatOneGuy, Jan 22 '16 at 11:09
Yes it is possible, you can loop through it and post it into the HTML code. Please post what you have already tried to do, so we can tell you what you are doing wrong. — Oliver Nybroe, Jan 22 '16 at 11:10
Possible duplicate of [jquery - JSON to ](http://stackoverflow.com/questions/5996805/jquery-json-to-table) — godzillante, Jan 22 '16 at 11:34

Santosh Jadi · Accepted Answer · 2016-03-21T06:48:44.870

Got the Solution,, Thank u all for the kind support

 function loadUserTable(userType){
              $.ajax({
                    type: "POST",
                    url: "loadUserTable.html",
                    data: "userType=" + userType,
                    success: function(response){
                        var obj = JSON.parse(response);
                        $("#tableId").html("");
                        var tr+="<tr><th>User ID</th><th>User Name</th></tr>";
                        for (var i = 0; i < obj.length; i++){
                              tr+="<tr>";
                              tr+="<td>" + obj[i].userId + "</td>";
                              tr+="<td>" + obj[i].login.userName + "</td>";
                              tr+="</tr>";
                        }
                        $("#tableId").append(tr);
                    }
              });
      }

Nitin Dhomse · Answer 2 · 2016-01-22T11:28:36.547

1

Yes it is possible. if you want to print json data in simple html table then just iterate (use loop) till your json length and construct your table inside loop.

But i will suggest you to use dataTable / bootstrap table plugin there you just need to pass json at the initialization time.

for Example,

$(document).ready(function () {
    $.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
            $('table').append(tr);
        }
    });
});

edited Jan 22 '16 at 11:28

answered Jan 22 '16 at 11:13

Nitin Dhomse

2,524
1
12
24

see you have nested json parse it properly then construct your table – Nitin Dhomse Jan 22 '16 at 11:23
example was just for idea, if you have json object you just need to iterate over it in for loop. wait i will give you simple example – Nitin Dhomse Jan 22 '16 at 11:41

YaBCK · Answer 3 · 2016-01-25T09:07:47.947

You'd simple just create a for loop inside success as following:

the obj[i] down below is just a placeholder. You'd have to get the correct value you want to place there.

HTML table container:

<div id="tableContainer">
  <table>
    <tbody class="tableBody">
    <tbody>
  </table>
</div>

JSON to append to table:

 function loadUserTable(userType)
    {
              var TableHTML = '';
              $.ajax({
                    type: "POST",
                    url: "loadUserTable.html",
                    data: "userType=" + userType,
                    success: function(response){
                        alert("eeee: "+response);
                        var obj = JSON.parse(response);

                        for (i = 0; i < obj.length; i++) 
                        {
                          TableHTML += '<tr><td>' + obj[i].userId + '</td></tr>';
                        }
                    },
              });   

              $(".tableBody").append(TableHTML);
    }

@ChrisBeckett Just a pointer, manipulating DOM element in a loop is bad practice. Create a variable and append HTML in string format to it and finally append this HTML to element — Rajesh, Jan 23 '16 at 06:57
@Rajesh - You're correct here, I've updated my answer to get away from the bad practice. — YaBCK, Jan 25 '16 at 09:08

Set JSON values to HTML Table in Java Script?

3 Answers3