使用 Ajax Datasrc 数据表显示数据时出现问题

Question

我有一个数据表，我正在尝试从 API URL 获取数据。问题是我已经获取了所有数据并处理并存储到一个名为 return_data 的数组中，但我的数据表没有显示该数组中的数据。

$(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" class="table table-striped table-hover table-bordered display nowrap text-center" style="width: 100%;">
    <thead class="thead-dark" style="width: 100% !important;">
        <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Races</th>
            <th class="text-center">Gold</th>
            <th class="text-center">Silver</th>
            <th class="text-center">Bronze</th>
            <th class="text-center">Total</th>
        </tr>
    </thead>
</table>

这是我的数组输出 Array Output

这是我当前代码的工作 fiddle。**

JSFIDDLE LINK

Answer 1

datatable 的 dataSrc 不会等待在其中进行的 ajax 调用。它在第一次调用获得结果后立即运行。

这是一个解决方法

$(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' }
                        ]

                    });
                }

            });

        }
    }
});


});

使用 Ajax Datasrc 数据表显示数据时出现问题

Having issue displaying data using Ajax Datasrc Datatable

html

javascript

ajax

datatable