T. Raut T. Raut - 5 months ago 82
jQuery Question

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":"jatin@122.d","status":"1"},{"id":"2","name":"Shubham","email":"jatin@122.d","status":"1"},{"id":"3","name":"Aneh","email":"jatin@122.d","status":"1"},{"id":"52","name":"php","email":"rauttausif38@gmail.com","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":"shubu@122.d","status":"12"},{"id":"59","name":"panku","email":"jatin@122.d","status":"3"},{"id":"60","name":"Jatin","email":"jatin@122.d","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>

Answer

You can see a simple result here:

var json = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"jatin@122.d","status":"1"},{"id":"2","name":"Shubham","email":"jatin@122.d","status":"1"},{"id":"3","name":"Aneh","email":"jatin@122.d","status":"1"},{"id":"52","name":"php","email":"rauttausif38@gmail.com","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":"shubu@122.d","status":"12"},{"id":"59","name":"panku","email":"jatin@122.d","status":"3"},{"id":"60","name":"Jatin","email":"jatin@122.d","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>");
  });
});
Comments