Loop through Ajax response and display in HTML table using jQuery

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.

 

Livewire Component Library

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

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.

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

Site Footer