如何将数组应用于视图

我正在做数组排序。但我不知道如何在视图中应用这个排序数组并给出合适的ui。这是我的数组排序代码。在点击我能够排序的结果，但它只显示数组值。

<script type="text/javascript">
function sort(key) {
    var sortTypes = {
            alpha: function (a, b) { return a[key].localeCompare(b[key]); },
            numerical: function (a, b) { return a[key] - b[key]; }
        },
        keys = {
            rateType: 'alpha',
            interestRateMin: 'numerical',
            financingPercentageMax: 'numerical',
            interestRateMax: 'numerical',
            financingPercentageMin: 'numerical',
            bankName: 'alpha',
            repaymentTenureInYears: 'numerical',
            age: 'numerical',
            maxLoanAmt: 'numerical',
        };
    return sortTypes[keys[key]];
}
var data = <?php echo json_encode($json['resultList']); ?>;
document.addEventListener('change', function () {
    var select = document.getElementById('sort-by'),
        index = select.selectedIndex,
        key = select.options[index].value
    data.sort(sort(key));
    document.getElementById('out').innerHTML = JSON.stringify(data, 0, 4);
});
</script>

在适当的ui中生成web服务的PHP代码

<div id="out">
      <?php if(count($json['resultList']) > 0): ?>
      <?php 
        foreach ($json['resultList'] as $key=>$value) {
            if($json["resultList"][$key]["interestRateMin"] == $json["resultList"][$key]["interestRateMax"]){
                $interest = $json["resultList"][$key]["interestRateMin"];
            }
            else{
                $interest = $json["resultList"][$key]["interestRateMin"].' - '.$json["resultList"][$key]["interestRateMax"];
}
            if($json["resultList"][$key]["financingPercentageMin"] == $json["resultList"][$key]["financingPercentageMax"]){
                $financing = $json["resultList"][$key]["financingPercentageMin"];
            }
            else{
                $financing = $json["resultList"][$key]["financingPercentageMin"].' - '.$json["resultList"][$key]["financingPercentageMax"];
}
                echo '
  <div class="cr-content">                
                <div class="bank-rates">
      <ul>
   <li>
   <div class="innr-spl" style="padding: 5px 0;">
          <span style="display:block;"><img src="'.$json["resultList"][$key]["imageUrl"].'"></span>
   <span class="hide">'.$json["resultList"][$key]["bankName"].'</span>
   </div>
   </li>
 <li><div class="innr-spl2">' . $interest . '%' . '</div></li>
 <li><div class="innr-spl2">' . $financing  . '</div></li>
   <li class="hide"><div class="innr-spl3 kmore" id="'.$key.'"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i>View Datails</div> </li>
        <li>
        <div class="apply-now innr-spl"><a href="http://www.zengalol.com/gold-loan/" type="button" role="button" target="_blank" class="btn-apply">Apply Now</a></div>
        </li>      
      </ul>
      <div style="clear:both"></div>
      <ul class="details" id="ban_'.$key.'" style = "display:none;">
        <li><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Maximum Loan Amount : '.$json["resultList"][$key]["maxLoanAmt"].'</li>
        <li><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Max Tenure (In Years) : '.$json["resultList"][$key]["repaymentTenureInYears"].'</li>
        <li><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Interest Rate Type : '.$json["resultList"][$key]["rateType"].'</li>    
      </ul>
    </div>
    </div>
                ';
                $i++;
        }

    ?>
<?php endif;?>
</div>