how to carry data after getJson

Question

I have a problem to carry a data in variable data after getJson .. below is my code

function format ( d ) {
  var id = d[1],$base = '<?php echo Routed::url('/api/course_fees_setup/getSponsorList?'); ?>';
   var rows = ''; 
    $.getJSON($base+'id=' + id,function(data){
        var index =0;
        var newOptions = data.data;
        var SponsorbyFee = newOptions.Sponsorship[0].SponsorbyFee;
        $.each(SponsorbyFee, function(value,key) {
          // console.log(key);
          switch(key['fee_type_id']){
            case '1' :
                  // console.log('program');
                  break;
            case '2' :
                  // console.log(key['OthersFee']);
                  rows[index] = '<tr><td>' + key['OthersFee']['payment_description'] + '</td><td>' + key['OthersFee']['price'] + '</td><td>' + key['OthersFee']['remarks'] + '</td><tr>';
                  index++;
                  break;
            case '3' : 
                  // console.log(key['DiscountFee']);
                  rows[index] = '<tr><td>' + key['DiscountFee']['payment_description'] + '</td><td>' + key['DiscountFee']['price'] + '</td><td>' + key['DiscountFee']['remarks'] + '</td><tr>';
                  index++;
                  break;
          }
        });
    });
    return '<br /><br /><table id="sponsorlist-tbl" class="hover cell-border" width="100%">'+
                    '<thead>'+
                          '<tr>'+
                              '<th width="30%">Payment Description</th>'+
                              '<th width="10%">Price</th>'+
                              '<th width="30%">Remarks</th>'+
                          '</tr>'+
                    '</thead>'+
                    '<tbody>'+
                      rows +
                    '</tbody>'+
                '<table><br /><br /><br />';
}

I want to return variable data at line 36 once I completed loop my rows at line 16. But seem like it return null.Can someone help me to correct my code since I just study about generate table in jquery. Any help will greatly appreciate. Thanks guys

Answer 1

$.getJSON() is returns results asynchronously. You can return html string and data from within $.getJSON() call after $.each(); use .then() to process results

function format ( d ) {
  var id = d[1],$base = '<?php echo Routed::url('/api/course_fees_setup/getSponsorList?'); ?>';
   var rows = ''; 
    return $.getJSON($base+'id=' + id)
    .then(function(data){
        var index =0;
        var newOptions = data.data;
        var SponsorbyFee = newOptions.Sponsorship[0].SponsorbyFee;
        $.each(SponsorbyFee, function(value,key) {
          // console.log(key);
          switch(key['fee_type_id']){
            case '1' :
                  // console.log('program');
                  break;
            case '2' :
                  // console.log(key['OthersFee']);
                  rows[index] = '<tr><td>' + key['OthersFee']['payment_description'] + '</td><td>' + key['OthersFee']['price'] + '</td><td>' + key['OthersFee']['remarks'] + '</td><tr>';
                  index++;
                  break;
            case '3' : 
                  // console.log(key['DiscountFee']);
                  rows[index] = '<tr><td>' + key['DiscountFee']['payment_description'] + '</td><td>' + key['DiscountFee']['price'] + '</td><td>' + key['DiscountFee']['remarks'] + '</td><tr>';
                  index++;
                  break;
          }
        });
        return ['<br /><br /><table id="sponsorlist-tbl" class="hover cell-border" width="100%">'+
                    '<thead>'+
                          '<tr>'+
                              '<th width="30%">Payment Description</th>'+
                              '<th width="10%">Price</th>'+
                              '<th width="30%">Remarks</th>'+
                          '</tr>'+
                    '</thead>'+
                    '<tbody>'+
                      rows +
                    '</tbody>'+


         '<table><br /><br /><br />'
         , data];
    });

}

format(/* parameter */).then(function(results) {
  console.log(results)
})