I have a datatable where I'm trying to get data from API URLs. The issue is i've fetched all the data and processed and stored into an array called return_data but my datatable is not showing the data which is in that array.

$(document).ready(function() {

    $('#datatable2').DataTable({

  'ajax':{
      'type'   : 'GET',
      'url'    : 'https://api-apollo.pegaxy.io/v1/pegas/owner/user/0xc580Aaf1D3C119E050AAEBf51D8cf912c8183A0A',
      'dataSrc': function(data){

          for(i=0; i<data1.length; i  ){
          var return_data = new Array();

              id = data[i].id;
              name = data[i].name;

              var url1 = 'https://api-apollo.pegaxy.io/v1/game-api/pega/' id;
              var url2 = 'https://api-apollo.pegaxy.io/v1/game-api/race/history/pega/' id;

              $.when($.getJSON(url1), $.getJSON(url2)).done(function(data2, data3){

                  id = data2[0].pega.id;
                  name = data2[0].pega.name;

                  var gold = 0, silver = 0, bronze = 0, total = 0, races = 0;

                  for(j=0; j<data3[0].data.length; j  ){

                      var today = new Date();
                      var yesterday = new Date(today);
                      yesterday.setDate(today.getDate() - 1);
                      today = today.toLocaleDateString();
                      yesterday = yesterday.toLocaleDateString();

                      var raced_date = moment(data3[0].data[j].updatedAt, 'YYYY-MM-DD').format('DD/MM/YYYY');    
                      var position   = data3[0].data[j].position;
                      var reward = data3[0].data[j].reward;

                      if(raced_date == today){
                              races  ;
                          if(position == 1){
                              gold  ;
                          }else if(position == 2){
                              silver  ;
                          }else if(position == 3){
                              bronze  ;
                          }
                          total  = reward;
                      }

                  }

                  return_data.push({
                      'Name': name,
                      'Races' : races,
                      'Gold'  : gold,
                      'Silver' : silver,
                      'Bronze' : bronze,
                      'Total' : total
                  })

// console.log(name ' = Races: ' races ', Gold: ' gold ', Silver: ' silver ', Bronze: ' bronze ' = ' total);

              });

          }
          console.log(return_data);
          return return_data;
      }

  },

'columns': [
  {'data': 'Name'},
  {'data': 'Races'},
  {'data': 'Gold'},
  {'data': 'Silver'},
  {'data': 'Bronze'},
  {'data': 'Total'}
]

});

});

<table id="datatable2"  style="width: 100%;">
    <thead  style="width: 100% !important;">
        <tr>
            <th >Name</th>
            <th >Races</th>
            <th >Gold</th>
            <th >Silver</th>
            <th >Bronze</th>
            <th >Total</th>
        </tr>
    </thead>
</table>

This is my array Output Array Output

Here is the working fiddle of my Current Code.**

JSFIDDLE LINK

CodePudding user response：

datatable's dataSrc won't wait for ajax calls made inside it. It runs right after getting result from 1st call.

Here's a workaround

$(document).ready(function () {

var return_data = new Array();
$.ajax({
    url: "https://api-apollo.pegaxy.io/v1/pegas/owner/user/0xc580Aaf1D3C119E050AAEBf51D8cf912c8183A0A", success: function (data) {
        for (i = 0; i < data.length; i  ) {
            id = data[i].id;
            name = data[i].name;

            var url1 = 'https://api-apollo.pegaxy.io/v1/game-api/pega/'   id;
            var url2 = 'https://api-apollo.pegaxy.io/v1/game-api/race/history/pega/'   id;

            $.when($.getJSON(url1), $.getJSON(url2)).done(function (data2, data3) {
                id = data2[0].pega.id;
                name = data2[0].pega.name;

                var gold = 0, silver = 0, bronze = 0, total = 0, races = 0;

                for (j = 0; j < data3[0].data.length; j  ) {

                    var today = new Date();
                    var yesterday = new Date(today);
                    yesterday.setDate(today.getDate() - 1);
                    today = today.toLocaleDateString();
                    yesterday = yesterday.toLocaleDateString();

                    var raced_date = moment(data3[0].data[j].updatedAt, 'YYYY-MM-DD').format('DD/MM/YYYY');    
                    var position = data3[0].data[j].position;
                    var reward = data3[0].data[j].reward;

                    if (raced_date == today) {
                        races  ;
                        if (position == 1) {
                            gold  ;
                        } else if (position == 2) {
                            silver  ;
                        } else if (position == 3) {
                            bronze  ;
                        }
                        total  = reward;
                    }

                }

                return_data.push({
                    'Name': name,
                    'Races': races,
                    'Gold': gold,
                    'Silver': silver,
                    'Bronze': bronze,
                    'Total': total
                });
                if (return_data.length === data.length) {
                    $('#datatable2').DataTable({

                        'data': return_data,

                        'columns': [
                            { 'data': 'Name' },
                            { 'data': 'Races' },
                            { 'data': 'Gold' },
                            { 'data': 'Silver' },
                            { 'data': 'Bronze' },
                            { 'data': 'Total' }
                        ]

                    });
                }

            });

        }
    }
});


});