Angular ng-grid:如何加载多个api数据?

I have a 'ng-grid' table that have 2 types of data source. One is from my database using a function called getContributors(), and another one is from a list of api(s).

The getContributors function is like the default function in the ng-grid tutorial.

            function getContributors() {
                var deferred = $q.defer();

                $http.get(contributorsFile)
                    .then(function(result) {
                        contributors = result.data;
                        deferred.resolve(contributors);
                    }, function(error) {
                        deferred.reject(error);
                    });

                return deferred.promise;
            }

My method for loading the multiple api data is to load the database data first, and then after all the database data is all loaded it will make a request to the api using a parameter from the database data

                    var ajax_wait_count = 0;

                gridService.getContributors().then(function(data) {
// Looping each data with angular.forEach()
                    angular.forEach(data, function(value, key){
                        var this_uid = value['uid'];

    //                  if(ajax_wait_count==0)
    //                  {
                            $timeout(function(){
                                $.ajax({
                                    url: "<?php echo $glob_base_url; ?>api/getrank.php",
                                    type: 'POST',
                                    data: { id: this_uid },
                                    dataType: 'json', // Notice! JSONP <-- P (lowercase)
                                    success: function (json) {
                                        // do stuff with json (in this case an array)
    //                            json = jQuery.parseJSON(json);
                                        data[key]['ranked_tier'] = json;
    //                            console.log(json);
                                    },
                                    error: function () {
    //                            alert("Error");
                                    }
                                });

                                $.ajax({
                                    url: "<?php echo $glob_base_url; ?>api/getlevel.php",
                                    type: 'POST',
                                    data: { id: this_uid },
                                    dataType: 'json', // Notice! JSONP <-- P (lowercase)
                                    success: function (json) {
                                        // do stuff with json (in this case an array)
    //                            json = jQuery.parseJSON(json);
                                        data[key]['level'] = json['level'];
    //                            console.log(json);
                                    },
                                    error: function () {
    //                            alert("Error");
                                    }
                                });

                                $.ajax({
                                    url: "<?php echo $glob_base_url; ?>api/getsummonercreate.php",
                                    type: 'POST',
                                    data: { id: this_uid },
                                    dataType: 'json', // Notice! JSONP <-- P (lowercase)
                                    success: function (json) {
                                        // do stuff with json (in this case an array)
    //                            json = jQuery.parseJSON(json);
                                        if (json != 0) {
                                            var date_c = json[0]['create_date'];
                                            date_c = date_c.replace(' ', 'T');
                                            new_date = new Date(date_c);
    //                            console.log(json);
                                            var datestring = new_date.format("yyyy-mm-dd HH:MM:ss");
                                            data[key]['summoner_create_date'] = datestring;
                                        }
                                        else if (json == 0) {
                                            data[key]['summoner_create_date'] = "";
                                        }
                                    },
                                    error: function () {
    //                            alert("Error");
                                    }
                                });

                                $.ajax({
                                    url: "<?php echo $glob_base_url; ?>api/getlastplayed.php",
                                    type: 'POST',
                                    data: { id: this_uid },
                                    dataType: 'json', // Notice! JSONP <-- P (lowercase)
                                    success: function (json) {
                                        // do stuff with json (in this case an array)
    //                            json = jQuery.parseJSON(json);
                                        if (json != "null" && json != null) {
                                            var datedatas = json;
                                            var datearray = [];
                                            var thedatestr = "";
                                            var loopidx = 1;

                                            now_date = new Date();
                                            now_date.setHours(0);
                                            now_date.setMinutes(0);
                                            now_date.setSeconds(0);

                                            now_date.setDate(now_date.getDate() - 2);

                                            next_date = new Date();
                                            next_date.setHours(23);
                                            next_date.setMinutes(59);
                                            next_date.setSeconds(59);

    //                                next_date.setDate(next_date.getDate());

                                            angular.forEach(datedatas, function (value3, key3) {
                                                datearray[key3] = parseInt(value3['createDate']);
                                            });
                                            datearray.sort();
                                            datearray.reverse();

                                            var count_played_today = 0;

                                            angular.forEach(datearray, function (value2, key2) {
                                                if (loopidx == 1) {
                                                    thedatestr = value2;
                                                }

                                                date_compare = new Date(parseInt(value2));

                                                if (date_compare.getTime() >= now_date.getTime() && date_compare.getTime() < next_date.getTime()) {
                                                    count_played_today++;
                                                }


                                                loopidx++;
                                            });

    //                                var date_c = json[0]['create_date'];
    //                                date_c = date_c.replace(' ','T');
                                            var dateinsert = parseInt(thedatestr);
                                            new_date = new Date(dateinsert);
    //                            console.log(json);
                                            var datestring = new_date.format("yyyy-mm-dd HH:MM:ss");
                                            data[key]['last_played_date'] = datestring;

                                            this_date = new Date();

                                            date_diff = dateDiff(new_date.toString(), this_date.toString());

                                            data[key]['last_played_date_qty'] = date_diff.d + " days " + date_diff.h + " hours " + date_diff.m + " minutes";
                                            data[key]['count_played'] = count_played_today;
                                        }
                                        else if (json == "null" || json == null) {
                                            data[key]['last_played_date'] = "";
                                            data[key]['last_played_date_qty'] = "";
                                            data[key]['count_played'] = 0;
                                        }
                                    },
                                    error: function () {
    //                            alert("Error");
                                    }
                                });
                            },1500);
                            ajax_wait_count=0;
    //                  }

                        ajax_wait_count++;
                    });
                    $scope.myData = data;
                });

Now, the problem that emerges is :

  • The loading time for the api data is very long, and because of ajax asynchronous request, I can't make a loading function to delay the data
  • It appends the api data after the database data, which sometimes confuses the user whether the data is loaded or not
  • Sometimes in Chrome, the request is too much and it returns "err_insufficient_resources"


My question is,

  1. Can my method of loading the api data be changed so it will make the loading time much faster and more efficient?
  2. To make users less confused about the high amount of data, how can I make the progressbar (angular progress bar) wait for the database data + the api (AJAX) data?

Thank you in advance