Technology to use synchronous requests client->server

manpreet Best Answer 2 years ago

I'm using thegamesdb.com 's API to get all gaming platforms and all games on each platform. At the moment, I start with a blank page, on document.ready, I do an AJAX call to the server to get all the platforms. Then I have to do another AJAX call for each platform to get a count of games on that platform (ex. PC has 2342 games, XBOX has 453 games, ...). The reason I'm doing this call too, is to provide the user a progress bar (0-100%) and to show the number of the game on the total games of the platform: /

So after these API calls, I should have a list of all the platforms which can be clicked to start another serverside call to do an api call for each game, to get the data of it. When a platform is clicked, the client sends a new call each time so that the server puts the game data in the database. Then we do the gamecounter++.

I've tried doing this with AJAX calls to the server:

$.getJSON($('#platformlist').data('url-getplatforms'), function (data) {
    self.platforms = $.map(data, function(p) { return new Platform(p); });
    console.log(self.platforms);
    $.each(self.platforms, function () {
        console.log(this);
        $.getJSON($('#platformlist').data('url-getplatformgames'), { platformId: this.id }, function (platformgamesdata) {
            this.countGamesDone = 0;
            $.each(platformgamesdata, function() {
                this.games.push(new PlatformGame(this));
                this.countGames++;
            });

        });
    });
});

But since this is async, this can not show the progress and just makes the browser load until all the games are in the database without any feedback. I could put the AJAX on async:false, but I've read that there are other ways of doing this, but no one says how to do it.

What are other options of doing this? I have no restrictions on what technologies to use. It's an ASP.NET MVC 5 application. I can use javascript, c#, signalr, jquery and any other javascript library if this can simplify this

manpreet 2 years ago

$('#bigFatLoadingMessage').show();

$.getJSON($('#platformlist').data('url-getplatforms'), function (data) {
    self.platforms = $.map(data, function(p) { return new Platform(p); });
    $.each(self.platforms, function () {

        //update overlay message
        $('#bigFatLoadingMessage').html('Loading platform ' + this.name);

        $.getJSON($('#platformlist').data('url-getplatformgames'), { platformId: this.id }, function (platformgamesdata) {
            this.countGamesDone = 0;
            $.each(platformgamesdata, function() {
                this.games.push(new PlatformGame(this));
                this.countGames++;
            });

        });
    });

    $('#bigFatLoadingMessage').hide();
});