Showing search results with ajax - php

Question

Please help,
I have the data that I loaded with ajax, but I am confused, how when I enter the item code, the data generated in json form, into the table
view
<div class="form-group col-md-4">
<label for="field-1" class="control-label">KODE RUNSHEET</label>
<input name="kd_runsheet[]" class="form-control" id="kode" type="text" placeholder="Masukan Kode Runsheet" style="" required="">
<input name="id_runsheet" id="id_runsheet" class="form-control" type="hidden" style="">
</div>
after searching I want to enter the json results in the table
<table class="table table-bordered" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th>Kode Outbound</th>
<th>Kode Resi</th>
</tr>
</thead>
<tbody id="isinya">
</tbody>
</table>
// search by ajax
$(document).ready(function(){
$('#kode').on('input',function(){
var kode=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('backend/history_status/caris')?>",
dataType : "JSON",
data : {kd_runsheet: kode},
cache:false,
success: function(data) {
jmlData = data.length;
tampung = "";
for (a = 0; a < jmlData; a++) {
tampung += "<tr>" +
"<td>" + (a + 1) + "</td>" +
"<td>" + data[a]["kd_runsheet"] + "</td>" +
"<tr/>";
}
$("tbody")[0].innerHTML += tampung;
}
});
return false;
});
});
Result Json
[
{"id_runsheet":"6","kd_runsheet":"RUNSHEET-0000-0003"},
{"id_runsheet":"6","kd_runsheet":"RUNSHEET-0000-0003"}
]
Model
public function caridb($kode){
$query = $this->db->query("SELECT runsheet.id_runsheet,kd_runsheet FROM runsheet
INNER JOIN runsheet_detail ON runsheet.id_runsheet=runsheet_detail.id_runsheet WHERE kd_runsheet ='$kode'");
return $query->result();
}
Controller
public function caris(){
$id=$this->input->post('kd_runsheet');
$data=$this->M_history_status->caridb($id);
echo json_encode($data);
}

Answer 1

Try something like this. Your markup should be inside a loop.
success: function(data){
var markup = "<tr>
<td><input type='text'></td>
</tr>";
$("#isinya").append(markup);
}

Answer 2

You are getting JSON Object's array
Seperate each JSON Object using loop and add it to table:
success: function(data){
for(i=0;i<data.length;i++){
var row="<tr><td>"+data[i].id_runsheet+"</td><td>"+data[i].kd_runsheet+"</td></tr>";
$("#isinya").append(row); //Adding rows in <tbody>
}
}