1

ここで髪を抜く。

Jquery、複数のJSONファイルとAjax

データを収集し、JSONファイルをWebサーバー上のフォルダーにダンプするPythonスクリプトがあります

私はそのデータを視覚化しようとしています。

基本的に、私は最初にSVGマップを描画し、ダミーのjsonファイルで色付けしています。続いて、JSONデータを使用して色を付けたいと思います。各JSONファイルは、マップの1つの完全なレンダリング（色付け）を表します。

ディレクトリ内のファイルを返すphpスクリプトへのAjax呼び出しを使用しています。次に、Ajax（または省略形の.getJson）を使用して、そのファイルのデータを格納し、マップに色を付けてから、次のファイルに移動します（最終結果はアニメーションです）。問題は、AJAXの非同期性であり、Ajaxビットのタイムリーな実行と完了を制御できないことです。明らかに、ブラウザをロックしたくないので、同期呼び出しをしたくありません。

これが私のコードです（お詫び-かなり重いです）

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

}

}); });
4

2 に答える 2

0

以下のように少し調整した素晴らしい解決策を見つけました。完璧に動作します。この人についての意見をありがとう。

        function getFiles(){

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

                for (_a in files.response){
                    for (_b in files.response[_a]){
                        var fname = files.response[_a][_b].substr(30, 8);
                        jsonVals[fname] = files.response[_a][_b];
                    }       
                }

                getData();

            },

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

        });

    }


    function getData(){

        _d = 0;

        function fireRequest(jsonURL) {
                return $.ajax({
                    type: "GET",
                    url: jsonURL,
                    dataType: 'json',
                    success: function(data){
                        console.log("got " + jsonURL);
                        if (_d == Object.size(jsonVals)){ console.log('done'); }


                    }
                });
        }

        var countries=["US","CA","MX"], startingpoint=$.Deferred();
        startingpoint.resolve();

        $.each(jsonVals,function(key, file) {
            startingpoint=startingpoint.pipe( function() {
                    console.log("making requst for " + file);
                    _d = _d + 1;
                    return fireRequest(file);
            });
        });


    }
于 2012-04-14T14:04:52.740 に答える
0

Ok、

json 処理コードを ajax success() 関数から切り離したい場合があります。代わりに、データを並べ替えてグローバル変数に格納します。すべてのデータを受信したら (チェックしてください)、関数を呼び出して SVG を描画し、タイミングを制御できます。jquery の $.document(ready) のようなもの

編集：

シナリオによっては、json ファイルのより効率的なキュー システムが必要になります。1 つの方法は、ランダムではなくチャンクで json ファイルをロードすることです。新しいファイルが 10 分ごとに作成されると述べたので、最初の json ファイルを取得し、さらに 35 個の json ファイルを取得すると、実質的に 6 時間分のデータが取得されます。1 つのフォルダーに現在 36 個未満のファイルがある場合は、36 個すべてが存在するまで待機してから、svg コードを実行して次の 36 個の json ファイルに移動するか、待機することができます。これにより、1 つの svg ファイルが 6 時間分のデータを表すタイミングを制御できます。36 から適切な値に変更することもできます。

于 2012-04-13T14:21:25.873 に答える