Показать данные json в формате таблицы html

Question

Привет, парень, я новичок в программировании. и я хочу отображать данные Json в таблице HTML с помощью jquery.

Выход пришел с сервера:

{"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 код:

<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 1

Вы можете увидеть простой результат здесь:

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>

Но вы можете использовать:

$.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>"); 
    }); 
}); 

Answer 2

Попробуйте следующий код, просто поместите этот код в Ajax успеха и заменить данные с ответом

var data = '{"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"}]}'; 
 
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>