jQuery在模态中给出未定义的值

I want to show data from a database to table that is in modal, i already try this code. But, it keep giving undefined value

here's the image:

Modal code:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <form id="myForm" action="" method="post" class="form-horizontal">
            <table class="table table-bordered table-striped">
              <thead>
              <tr>
                <th>NIK</th>
                <th>Nama</th>
              </tr>
              </thead>
              <tbody id="TampilDataModal">
              </tbody>
            </table>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Script :

$('#TampilData').on('click','.item-detail-plp', function(){
  var idPelapor = $(this).attr('data');
  $('#myModal').modal('show');
  $.ajax({
      url: 'GetPelapor',
      async: false,
      method: 'get',
      type: 'ajax',
      data: {idPelapor:idPelapor},
      datatype: 'json',
      success: function (data) {
      var html = '';
      var i;
      for(i=0; i<data.length; i++){
        html +='<tr>'+
              '<td>'+data[i].idPelapor+'</td>'+
              '<td>'+data[i].nama+'</td>'+
              '</tr>';
      }
      $('#TampilDataModal').html(html);   
    }
    });
});

response from json [{"idPelapor":"3","nama":"a"}]

You need to convert your JSON into an object literal, otherwise it will loop through each character of the JSON string and try to get a property of each character which will be undefined.

function (data) {
    data = JSON.parse(data);`