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

Question

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" 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>

This is my array Output Array Output

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

JSFIDDLE LINK

Answer 1

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

                    });
                }

            });

        }
    }
});


});