JQUERY AJAX TABLE

Using jQuery to build table rows from Ajax response(Json)

by dshilkret

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="records_table" class="pure-table pure-table-horizontal">
  <thead class="thead-inverse">
    <tr>
      <th>entity_id</th>
      <th>protect_code</th>
      <th>status</th>
      <th>base_grand_total</th>
    </tr>
  </thead>
</table>

JavaScript

$.ajax({
  url: 'https://1-dot-nyaka-zendesk-exotel.appspot.com/getMagentoOrderDetails?customerNo=9892452990',
  type: 'GET',
  success: function(response) {
    alert(response);
    var trHTML = '';
    if (response == "") {
      alert("No records");
       //trHTML = '<tr><td>'No Records to be show'</td></tr>';
    } else {
      response = $.parseJSON(response);
      $.each(response, function(i, item) {
        trHTML += '<tr><td>' + item.entity_id + '</td><td>' + item.protect_code + '</td><td>' + item.status + '</td><td>' + item.base_grand_total + '</td></tr>';
      });
    }
    $('#records_table').append(trHTML);
  },
  error: function(jqXHR, exception) {
    if (jqXHR.status === 0) {
      alert('Not connect.\n Verify Network.');
    } else if (jqXHR.status == 404) {
      alert('Requested page not found. [404]');
    } else if (jqXHR.status == 500) {
      alert('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
      alert('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
      alert('Time out error.');
    } else if (exception === 'abort') {
      alert('Ajax request aborted.');
    } else {
      alert('Uncaught Error.\n' + jqXHR.responseText);
    }
  }
});