Question

Pulling my hair out here.

Jquery, Multiple JSON files & Ajax

I have a python script that is gathering data and dumping JSON files into a folder on my webserver

I am trying to visualise that data.

Basically I am first drawing an SVG map and coloring it in with a dummy json file. Subsequently I want to color it in using the JSON data. Each JSON file will represent one complete rendering (coloring) of the map.

I am using an Ajax call to a php script that returns the files in the directory. I then want to use Ajax (or the shorthand .getJson) to lad the data in that file -colour the map, and then move on to the next one (end result is an animation). The problem is the asynchronous nature of AJAX and not having any control over the timely execution and completion of the Ajax bit. Obviously i don’t want to make a synchronous call because i don’t want to lock up the browser.

Here’s my code (apologies -it’s fairly hefty)

jQuery(document).ready(function() {

$(function() {

    var map, c = [];
    var dep_data;
    var val = {};
    var max= 0;
    var vals = new Array();

    c = $('#map');
    c.height(c.width()*.5);

    drawMap('mapData.json');

    function drawMap(url){
        console.log(url);
        $.ajax({
        url: 'mapData.json',
        dataType: 'json',
        success: function(data) {

            dep_data = data;

            map = window.m = $K.map('#map', 600, 800);
            map.loadMap('ireland.svg', function() {
                map.loadStyles('./mapping_files/style.css');
                map.addLayer({
                    id: 'regions',
                    key: 'name-1'
                });

                colourMap(dep_data);

                    var mapData = $.ajax({
                        url: './php/getfiles.php',
                        type : 'POST',
                        dataType: 'json',
                        success: function (files){

                            for (_a in files.response){
                                for (_b in files.response[_a]){
                                      $.ajax({
                                        url: files.response[_a][_b],
                                        dataType: 'json',
                                        success: function (json){
                                          colourMap(json);
                                          $(this).dequeue();
                                        }
                                      });
                                }       

                            }
                        },

                        error: function (files){
                            console.log(files.message);
                        },

                    });

                });

            }
        });



    }

    colourMap = function(data) {

    //do the coloring in...

}

}); });

Answer 1

Ok,

You might want to decouple your json processing code from the ajax success() function. Instead, sort the data and store it in a global variable. Once all data has been received (check for that), you can call a function to draw your SVG, thus having control over timing. Its like the $.document(ready) of jquery

EDIT:

Depending on your scenario, you need a more efficient queue system for your json files. One method would be to load json files in chunks instead of randomly. You’ve mentioned that a new file is created every 10 minutes, so obtain the first json file and acquire, lets say, 35 more json files, in effect obtaining 6 hours of data. If one folder currently has less than 36 files, you can choose to wait until all 36 are present, then run the svg code and move on to, or wait for, the next 36 json files. This brings in control over timing, where one svg file represents 6hrs of data. You can also change from 36 to any reasonable value