[Resolved] codeigniter 4 fetch data from multiple models using ajax

See more:

Javascript

Ajax

CodeIgniter

Hello,

I want to get data from related tables on a dropdown change event using Ajax.
My Controller and Model results are ok, but I don't know that how to display the data returned from controller in JavaScript.

Because the Data have two arrays, fees and feetype so I dont know how to display data in table, and also to display feetype matched with feetypeid in fees array.

Class Fee Model:
Sessionid, Classid, Feetypeid, FeeAmount

FeeType Model:
Feetypeid, Feetype


This worked for me:

in my model I used the below code.

$data = $model->join('tblfeetype', 'tblfeetype.id = tblclassfee.feetypeid','left')->where($array)->findAll();

What I have tried:

Controller:

public function getclassfee()
    {
        $model = new ModelAjax();
        $sessionid = $this->request->getVar('sessionid');
        $classid = $this->request->getVar('classid');
        $data =  $model->getclassfee($sessionid,$classid);
        echo json_encode($data);
    }

Model:

public function getclassfee($sessionid,$classid)
   {
       $model = new ModelClassFee();
       $tmodel = new ModelFeeType();
       $array = ['sessionid' => $sessionid, 'classid' => $classid];
       $data['fees'] = $model->where($array)->findAll();
       $data['feetypes'] = $tmodel->findAll();
        return $data;
   }

JavaScript:

$("#classid").change(function(){
        var classid=$(this).val();
        var sessionid = $('#sessionid').val();
        $.ajax({
            url : "<?php echo site_url('Ajax/getclassfee'); ?>",
            method : "POST",
            data : {sessionid : sessionid, classid : classid},
            async : true,
                dataType : 'json',
                success: function(data)
                {
                    var html = '';
                        var i;
                        for(i=0; i<data.length; i++){
                            html += '<tr><td>'+data[i][1].feetype+'</td><td>'+data[i].feeamount+'</td>';
                            html += '<td><a href="<?= site_url('ClassFee/editclassfee/');?>'+data[i].id+'"class="btn btn-primary btn-sm"> Edit </a> | ';
                            html += '<a href="<?= site_url('ClassFee/delclassfee/'); ?>'+data[i].id+'" class="btn btn-danger btn-sm"> Delete</a></td>';
                            html += '</tr>'; 
                        }
                        $('#classfeedetail').html(html);
                }
            });
            return false;
       });