Load JSON Data into Table using jQuery

There is a time you need to load content from JSON data into table in your project. Probably here is the quick jQuery $.ajax solution for you to look up for a sample.

Photo by Artem Sapegin on Unsplash

In my previous writing on attempt to Load Dynamic HTML Tabs from JSON Data using jQuery, well this time I want to load JSON data into HTML table.

HTML

<div class="tables">
   <!-- button trigger -->
   <button class="btn btn-primary" id="view-doctors">
      View Doctor
   </button>
   <div>
      <!-- table result -->
      <div class="tables-doctor">
      </div>
   </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');
body {
 font-family:'Open Sans', Arial, Verdana;
 background-color:yellow;
   padding:2rem;
}
p, h3 {
   margin:0;
   padding: 0;
}
.tables-doctor {
   &-content {
      margin:0 0 2rem 0;
   }
   &-name {
      font-weight:bold;      
   }
   &-title {
      color:#777;
   }
}
.table {
   margin:1rem 0 1rem 0;
   width:100%;
   background: #f1f1f1;
   border-collapse: collapse;
   display: table;
   thead tr th {
      border-bottom: 1px solid #666;
      border-top: 1px solid #666;
      padding: .5rem 1rem .5rem .5rem;
      background: #e4e4e4;
   }
   th {
      text-align:left;
      padding: .5rem 1rem .5rem .5rem;
      border-collapse: collapse;
      &[scope="row"] {
         font-weight:bold;
      }
      &[scope="col"] {
         text-align:left;
         color: #333;
         padding: .5rem 1rem .5rem .5rem
      }
   }
   tbody tr:nth-child(even) {background: #f3f3f3}
   tbody tr:nth-child(odd) {background: #FFF}
}
.btn {
   border:1px solid #666;
   padding:.5rem .95rem;
   cursor: pointer;
   transition: background-color .5s ease;
   &:hover {
      background-color: #ccc;
   }
}

jQuery

// json data
var api = "https://raw.githubusercontent.com/dyarfi/doctors.json/master/doctors.json";
// button trigger
$('#view-doctors').on('click',function() {      
   var button = $(this);      
   $.ajax({
      url:api,
      method:'GET',
      cache:false,
      type:"text/json"
   })
   .always(function(){
      $(button).html('Load Doctor Data...');
   })
   .done(function(evt) {
      // Disable button
      $(button).prop('disabled',true);
      // Set timeout for lazy loading
      setTimeout(function(){
         var result = JSON.parse(evt);
         var html = '<h2>Data Dokter</h2>';
         html += '<div class="tables-doctor-content">';
         for(var i=0;i < result.Data.length; i++) {
            html +='<h3 class="tables-doctor-name">'+result.Data[i].DoctorName+'</h3>'
               +'<p class="tables-doctor-title">'+result.Data[i].Specialist+'</p>';
if(result.Data[i].Hospitals.length > 0) {  
               html +='<table class="table">'
                  +'<thead>'
                  +'<tr>'
                  +'<th scope="col">Nama Rumah Sakit</th>'
                  +'<th scope="col">Alamat</th>'
                  +'<th scope="col">Jadwal Praktek</th>'
                  +'</tr>'
                  +'</thead>'
                  +'<tbody>';
for(var j=0;j < result.Data[i].Hospitals.length; j++) {
                  html +='<tr>'
                     +'<th scope="row">'+result.Data[i].Hospitals[j].Name+'</th>'
                     +'<td>'+result.Data[i].Hospitals[j].Address+'</td>'
                     +'<td>'+result.Data[i].Hospitals[j].Schedule+'</td>'
                     +'</tr>';
               }
               html +='</tbody></table>';
            }
         }
         html +='</div>';
         // Set all content
         $('.tables-doctor').html(html);
     },1000); 
   })
   .fail(function() {
      alert('Error : Failed to reach API Url or check your connection');
      $(button).prop('disabled',false);
   })
   .then(function(evt){
      setTimeout(function(){        
         $(button).css({'background-color':'#ccc'}).hide();          
      },1000);
   });
});

I put setTimeout to 1000 for custom lazy loading. Feel free to remove thesetTimeout function if you want.

Button trigger

Table result after click event on the button

Codepen result on load JSON data into table

The demo show you that if click event occurs on the button, the script will trigger $.ajax request for loading json data and display it on the table.

Thank you for reading. This was also part of my journey on attempt to share my experiences that I encountered in my daily jobs.

References :
https://api.jquery.com/
https://sass-lang.com/