CODEWITHSUNDEEP
phpjqueryjson
Tausif Raut
Tausif Raut

Reputation: 55

Display json data in html table format

Hey guy's I am new in programming. and i want to display Json data in HTML table using jquery.

Output came from server:

{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"[email protected]","status":"1"},{"id":"2","name":"Shubham","email":"[email protected]","status":"1"},{"id":"3","name":"Aneh","email":"[email protected]","status":"1"},{"id":"52","name":"php","email":"[email protected]","status":"test"},{"id":"53","name":"faf","email":"as","status":"d"},{"id":"54","name":"taus","email":"alksd","status":"fdasd"},{"id":"55","name":"nake","email":"nakk","status":"naii"},{"id":"56","name":"test1","email":"tausf","status":"dfasd"},{"id":"57","name":"","email":"","status":""},{"id":"58","name":"shubu","email":"[email protected]","status":"12"},{"id":"59","name":"panku","email":"[email protected]","status":"3"},{"id":"60","name":"Jatin","email":"[email protected]","status":"123d"}]}

HTML Code:

<table border="1" align="center">
   <tr>
       <td> <input type="button" id="display" value="Display All Data" /> </td>
   </tr>
</table>
<div id="responsecontainer" align="center">
</div>

jquery : 

<script>

        $(document).ready(function() {

        $("#display").click(function() {                

          $.ajax({    //create an ajax request to load_page.php
            url:'http://localhost/webservice/php_webservices/WebServices.php?method=select',
            type: "POST",             
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
                $("#responsecontainer").html(response); 
                //alert(response);
            }

        });
    });
    });
    </script>

Upvotes: 4

Views: 2908

Answers (2)

Subodh Ghulaxe
Subodh Ghulaxe

Reputation: 18671

Try following code, just place this code in your ajax success and replace data with your response

var data = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"[email protected]","status":"1"},{"id":"2","name":"Shubham","email":"[email protected]","status":"1"},{"id":"3","name":"Aneh","email":"[email protected]","status":"1"},{"id":"52","name":"php","email":"[email protected]","status":"test"},{"id":"53","name":"faf","email":"as","status":"d"},{"id":"54","name":"taus","email":"alksd","status":"fdasd"},{"id":"55","name":"nake","email":"nakk","status":"naii"},{"id":"56","name":"test1","email":"tausf","status":"dfasd"},{"id":"57","name":"","email":"","status":""},{"id":"58","name":"shubu","email":"[email protected]","status":"12"},{"id":"59","name":"panku","email":"[email protected]","status":"3"},{"id":"60","name":"Jatin","email":"[email protected]","status":"123d"}]}';
var obj = JSON.parse(data);
var tableContent = "<table>";
tableContent += "<tr><th>ID</th><th>Name</th><th>Email</th><th>Status</th></tr>";
if(obj.data) {
 $.each( obj.data, function( key, value ) {
   tableContent += '<tr>';
   tableContent += '<td>'+value.id+'</td>';
   tableContent += '<td>'+value.name+'</td>';
   tableContent += '<td>'+value.email+'</td>';
   tableContent += '<td>'+value.status+'</td>';
   tableContent += '</tr>';
 });
}
tableContent += "</table>";
$("#responsecontainer").html(tableContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table border="1" align="center">
   <tr>
       <td> <input type="button" id="display" value="Display All Data" /> </td>
   </tr>
</table>
<div id="responsecontainer" align="center">
</div>

Upvotes: 2

Roxoradev
Roxoradev

Reputation: 893

You can see a simple result here:

var json = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"[email protected]","status":"1"},{"id":"2","name":"Shubham","email":"[email protected]","status":"1"},{"id":"3","name":"Aneh","email":"[email protected]","status":"1"},{"id":"52","name":"php","email":"[email protected]","status":"test"},{"id":"53","name":"faf","email":"as","status":"d"},{"id":"54","name":"taus","email":"alksd","status":"fdasd"},{"id":"55","name":"nake","email":"nakk","status":"naii"},{"id":"56","name":"test1","email":"tausf","status":"dfasd"},{"id":"57","name":"","email":"","status":""},{"id":"58","name":"shubu","email":"[email protected]","status":"12"},{"id":"59","name":"panku","email":"[email protected]","status":"3"},{"id":"60","name":"Jatin","email":"[email protected]","status":"123d"}]}'
json = JSON.parse(json);

var tb = $("#tab");

$.each(json.data,function(i,value){
  tb.append("<tr><td>ID: " + value.id + "</td><td>Name: " + value.name + "</td><td>Email: " + value.email + "</td><td>Status: " + value.status + "</td></tr>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab">
  
<table>

But you may want to use: 

$.getJSON(url,function(data){
var tb = $("#tab");
  $.each(data.data,function(i,value){
    tb.append("<tr><td>ID: " + value.id + "</td><td>Name: " + value.name + "    </td><td>Email: " + value.email + "</td><td>Status: " + value.status + "</td></tr>");
  });
});

Upvotes: 4

Related Questions