ajax select data with multiple related data

i want to show checkbox looping from db, if i try to select data id_kendaraan in field then show the data from that id.

this my view code:

<div class="modal fade" id="tambah" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h3 class="modal-title" id="myModalLabel">Tambah Pemeliharaan</h3>
            </div>
            <form class="form-horizontal" method="post" action="<?php echo base_url()?>Data/Pemeliharaan/Tambah">
                <div class="modal-body">
                    <div class="form-group">
                    <label class="control-label col-xs-3">Nama Kendaraan</label>
                        <div class="col-xs-8">
                            <select class="form-control"  name="id_kendaraan" id="id_kendaraan" required>
                            <option>Pilih Kendaraan</option>
                            <?php
                            if(!empty($kendaraan_)) {
                            foreach ($kendaraan_ as $isi) {
                            ?>
                            <option value="<?php echo $isi['id_kendaraan']?>"><?php echo $isi['nama']?> - <?php echo $isi['platno']?></option>
                            <?php }} ?>
                            </select>
                        </div>
                    </div>
                    <?php
                    $index =0;          
                    foreach ($subkriteria_ as $kr_key => $kriteria) {
                    ?>
                    <div class="form-group">
                        <label class="control-label col-xs-3"><?php echo $kriteria['nama_kriteria'] ?></label> 
                        <div class="col-xs-8">
                                <input type="hidden" name="status_pemeliharaan" value="1" class="form-control">
                                <input type="hidden" name="id_kriteria[]" value="<?php echo $kriteria['id_kriteria'] ?>" class="form-control">  
                            <?php if(!empty($kriteria['sub'])) { ?> 
                            <select class="form-control"  name="isi_kriteria[]" required>
                                <option>Pilih Sub Kriteria</option>
                                <?php $no = 1; foreach ($kriteria['sub'] as $data)     { ?>
                                <option value="<?php echo $data['value'] ?>"><?php echo $data['namasubkriteria'] ?> - <?php echo $data['value'] ?></option>
                                <?php  $no++; } ?>
                            </select>
                            <?php } else if($kriteria['link']=='tahun_beli') { ?>
                                <input name="isi_kriteria[]" value="" class="form-control" type="text" placeholder="Isi Kriteria..." readonly required>
                            <?php } else { ?>
                                <input name="isi_kriteria[]" value="" class="form-control" type="number" placeholder="Isi Kriteria..." required>
                            <?php } ?>
                        </div>
                    </div>
                    <?php } ?>
                    <div class="form-group">
                        <label class="control-label col-xs-3"></label>
                        <div class="col-xs-8">
                            <ul id="sparepartList" style="list-style-type: none; padding: 0;"></ul>
                        </div>
                    </div>
                </div> 
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
                    <button class="btn btn-info">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
$(document).ready(function(){
        $('#id_kendaraan').on('input',function(){
            
        var id_kendaraan=$(this).val();
        $.ajax({
            type : "POST",
            url  : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
            dataType : "JSON",
            data : {id_kendaraan: id_kendaraan},  
            cache:false,
            success: function(data){
                $('#sparepartList').empty(); // clear all sparepart checkboxes
                $.each(data, function(id_kendaraan, tahun_beli, id_jenis){
                    $('[name="isi_kriteria[]"]').val(data.tahun_beli);
                    $('[name="id_jenis"]').val(data.id_jenis);
                    $.each(data.spareparts, function (key, value) {
                        let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
                                '<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
                        $('#sparepartList').append(li);
                    });
                });
                    
            }
        });
        return false;
    });
});
</script>

my controller:

function GetKendaraanById(){
        $id_kendaraan=$this->input->post('id_kendaraan');
        $data=$this->PemeliharaanModel->GetById($id_kendaraan);
        echo json_encode($data);
      }

i get data from view $id_kendaraan for my parameter.

this my model:

function GetById($id_kendaraan){
    $this->db->select('*');
    $this->db->from('tb_kendaraan');
    $this->db->where('tb_kendaraan.id_kendaraan',$id_kendaraan);
    $query_kendaraan = $this->db->get();
    $hasil = false;
    if($query_kendaraan->num_rows() > 0)
    {
        $data_kendaraan = $query_kendaraan->row();
        $hasil = [
            'tahun_beli' => $data_kendaraan->tahun_beli,
            'id_jenis' => $data_kendaraan->id_jenis,
            'spareparts' => [] // empty array, to be filled with spareparts data
        ];
        $this->db->select('*');
        $this->db->from('tb_sparepart');
        $this->db->where('tb_sparepart.id_jenis', $data_kendaraan->id_jenis);
        $query_sparepart = $this->db->get();
        
        foreach ($query_sparepart->result() as $data_sparepart) {
            $spareparts = [
                'id_sparepart' => $data_sparepart->id_sparepart,
                'sparepart' => $data_sparepart->sparepart,
            ];
            array_push($hasil['spareparts'], $spareparts);
        }
    }
    return $hasil;
}

but if i try this code, field tahun_beli, id jenis is success to showing in the view. but the checkbox from sparepart is looping exaggerated.

i try the json, the data is correct, show tahun_beli, id_jenis, is show and sparepart is show by id_jenis

but in view i try this code… tahun_beli and id_jenis is correct show one data, but sparepart is looping 3 times.. sparepart should be show data 1 times…

Answer

I checked your code and I think the issue is at this one:

<script type="text/javascript">
$(document).ready(function(){
        $('#id_kendaraan').on('input',function(){
            
        var id_kendaraan=$(this).val();
        $.ajax({
            type : "POST",
            url  : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
            dataType : "JSON",
            data : {id_kendaraan: id_kendaraan},  
            cache:false,
            success: function(data){
                $('#sparepartList').empty(); // clear all sparepart checkboxes
                $.each(data, function(id_kendaraan, tahun_beli, id_jenis){
                    $('[name="isi_kriteria[]"]').val(data.tahun_beli);
                    $('[name="id_jenis"]').val(data.id_jenis);
                    $.each(data.spareparts, function (key, value) {
                        let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
                                '<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
                        $('#sparepartList').append(li);
                    });
                });
                    
            }
        });
        return false;
    });
});
</script>

try to remove the first $.each, your code would be like this

<script type="text/javascript">
$(document).ready(function(){
        $('#id_kendaraan').on('input',function(){
            
        var id_kendaraan=$(this).val();
        $.ajax({
            type : "POST",
            url  : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
            dataType : "JSON",
            data : {id_kendaraan: id_kendaraan},  
            cache:false,
            success: function(data){
                $('#sparepartList').empty(); // clear all sparepart checkboxes
                
       $('[name="isi_kriteria[]"]').val(data.tahun_beli);
                    $('[name="id_jenis"]').val(data.id_jenis);
                    $.each(data.spareparts, function (key, value) {
                        let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
                                '<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
                        $('#sparepartList').append(li);
                    });
            }
        });
        return false;
    });
});
</script>

Hopefully it works