When you have an ajax response which in the array format, and you have to loop through the result and display them in the tabular format.
Here is the simple code approach to loop through ajax response using jQuery and then fill the content of array into HTML table.

On success of response , loop through each value of array using below code.

<script>
      $(document).ready( function () {
$.ajax({
                    url: "/url", 
                    type: "GET",          
                    cache: true, 
                    success: function(response){
						$.each(response, function (key, value) { 
							$('#exampleid').append("<tr>\
										<td>"+value.column1+"</td>\
										<td>"+value.column2y+"</td>\
										<td>"+value.column3+"</td>\
										</tr>");
						})
                    }
					
				});
</script>

.append is used as we have to add multiple values in rows of table.

 

Here is the code of referring this formatted response. #exampleid is given to tbody elment to refer that ajax response.


<div class="col-lg-6">
					  <table class="table table-bordered table-striped">
		                <thead>
		                <tr>
		                    <th>column1</th>
		                    <th>column2</th>
		                    <th>column3</th>
		                </tr>
		                </thead>
						<tbody id="exampleid">
						</tbody>
		            </table> 
		</div>

So this is the formatting of ajax array response in table and referring that table output wherever is required.
Hope this made your search easy. please comment if any improvement or topic is required from our side.

Comments