Создание динамического HTML таблицы на основе ответа PHP Аякса запроса

Question

У меня есть страница, которая отправить запрос на PHP для получения некоторых данных и в ответ на эту просьбу PHP возвращает мне что-то вроде этого: -

[{"postID":"1","0":"1","userID":"3","1":"3","imagePath":"images\/31481440272.jpg","2":"images\/3-1481440272.jpg","postDate":"11 December 2016","3":"11 December 2016","postDescription":"trying","4":":D trying"}] 

То, что я хочу, чтобы сделать динамический HTML таблицу внутри определенного DIV

<div id="dataWillBeShownHere"></div> 

Что я буду делать, если записи будут больше, чем 1.Should я использую для каждого цикла в течение более чем одной записи.

Я действительно смущен в этой вещи. Как-то я знаю решение, но не могу реализовать.

Надеюсь, вы поняли мой вопрос.

Answer 1

var val =0; 
    //alert("entered"); 
     $.ajax({ 
      url:"showPosts.php", 
      type:"post", 
      data:val, 
      success : function(response){ 
       var data=JSON.parse(response); 
       //alert(data.toSource()); 
       $(data).each(function(index, element){ 
        $('#dataWillBeShownHere').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td> <td> '+element[2]+' </td> <td> '+element[3]+' </td></tr>');  
       }) 
       $("#result").html(response); 
      },error : function(jqXHR, textStatus, errorThrown){ 
       $("#result").html(errorThrown + textStatus); 
      } 
     }); 

Answer 2

Вы можете сделать это с помощью простого яваскрипта и HTML:

<script type="text/javascript"> 
var records = []; 
// This data could be retrieved from an ajax $.post 
var data = {"postID":"1","0":"1","userID":"3","1":"3","imagePath":"images\/31481440272.jpg","2":"images\/3-1481440272.jpg","postDate":"11 December 2016","3":"11 December 2016","postDescription":"trying","4":":D trying"}; 

// Add our data to the records array 
records.push(data); 

// Get how many record we have 
var record_count = records.length; 

// Parse data to html tables 
for (var i = records.length - 1; i >= 0; i--) { 
    var html = ""; 

    // make your html additions here 
    html += "<div> ID: " + records[i]["postID"] + "</div>"; 
    html += "<div> Date: " + records[i]["postDate"] + "</div>"; 
    // html += ; 
    // html += ; 

    // Now use jquery selector to write to the div 
    $('#data-table').html(html); 
}; 
</script> 


<div id="data-table"></div> 

Проверьте мой JSFiddle