CODEWITHSUNDEEP
javascriptjqueryhtmlajax
awais ahmad
awais ahmad

Reputation: 51

Making a dynamic html table on basis of php response to ajax request

I have page which send request to a php for getting some data and in response to that request of php returns me something like this:-

[{"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"}]

What I want is to make a dynamic html table inside a specific div

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

What will I do if records will be more than 1.Should I use for each loop for more than one record.

I am really confused in this thing. Somehow I know the solution but cannot implement.

I hope you have understand my question.

Upvotes: 3

Views: 160

Answers (1)

lgroschen
lgroschen

Reputation: 170

You can do this with simple javascript and 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>

Check my JSFiddle

Upvotes: 1

Related Questions