Leaflet Routing Machine Value not Show

Question

I want get total value KM using the leaflet routing machine. I want show the value to the html table, but when I try to retrieve the value from the routing machine. I did not get the results

i using ajax to get value from server and leaflet routing machine to get Total KM.

function getJarak(){
$.ajax({
  url:'<?=base_url()?>'+'lahan/tampilDataPermintaan',
  async : true,
  dataType : 'JSON',
  success:function(data){
    myfunction(data);
  }
});

}

function myfunction(data){
for(var i=0;i<data.length;i++){
  var lat1=data[i].latitude;
  var lang1=data[i].longitude;
  var lat2=-0.8961947;
  var lang2=100.417438;
  var wayPoint1 = L.latLng(lat1,lang1);
  var wayPoint2 = L.latLng(lat2,lang2);
  tampilJalur(lat1,lang1,lat2,lang2);
  var nama_kecamatan = data[i].nama_kecamatan;
  rWP1 = new L.Routing.Waypoint;
  rWP1.latLng = wayPoint1;
  rWP2 = new L.Routing.Waypoint;
  rWP2.latLng = wayPoint2;
  getJarak(rWP1,rWP2).then(function(distance){
    tampilTabelJarak(i,nama_kecamatan,distance);
  });
}

}

function getJarak(rWP1,rWP2){
  return new Promise(function(resolve,reject){
      var myRoute =  L.routing.mapbox('thismyapi');
      myRoute.route([rWP1, rWP2], function(err, routes) {
      distance = routes[0].summary.totalDistance / 1000;
      resolve(distance);
    });
  });

}

function tampilTabelJarak(i,nama_kecamatan,distance){
var html;
var nomor = i;
html += '<tr>'+
        '<td>'+nomor+'</td>'+
        '<td>'+nama_kecamatan+'</td>'+
        '<td>'+distance+'</td>'
        '</tr>';
        $('.data').html(html);

}

i want show like this nomor|nama kecamatan|distance 1 | a |100 2 | b |300