今更ですがAjaxでのファイルの読み込みについてです。
Dataセットが複数あるようなJSONファイルの読み込みを行います。
JOSNの形式はこんな感じのデータにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ "Status": true, "DataId": "10212011", "DataCount": 3, "data": [ { "date": "2018-07-26T15:00:00.000Z", "value1": 102, "value2": 324 }, { "date": "2018-07-27T15:00:00.000Z", "value1": 230, "value2": 468 }, { "date": "2018-07-28T15:00:00.000Z", "value1": 1980, "value2": 2343 } ] } |
データ関連の構造を複数持っていて階層的に取り込みを行う必要があります。
グラフ関連の処理でよく使われますね。
今回は描画関連の処理ではなく、リストにデータを格納して行くという処理を実施して見ます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$.ajax({ type: 'GET', url:'/sample_api/test1', dataType: 'json', }).done(function(jsonData,textStatus,jqXHR) { var data1 = JSON.stringify(jsonData); var data2 = JSON.parse(data1); var len = data2["data"].length; for(var i = 0; i < len; i++){ var listData1 = []; var listData2 = []; var listDate = new Date(data2["data"][i]["date"]); var value1 = data2["data"][i]["value1"]; var value2 = data2["data"][i]["value2"]; listData1.push({ date: listDate, value: value1, }); listData2.push({ date: listDate, value: value2, }); } }).fail(function(jqXHR, textStatus, errorThrown ) { console.log('Ajax Error'); }); |
エラー時はコンソールログにエラーを出しているだけになります。
実際にはリストに組み込んだデータを何かしら処理する形になると思います。
今回はシンプルでしたがこんな感じで。
このブログは株式会社CoLabMixによる技術ブログです。
GCP、AWSなどでのインフラ構築・運用や、クローリング・分析・検索などを主体とした開発を行なっています。
Ruby on RailsやDjango、Pythonなどの開発依頼などお気軽にお声がけください。
開発パートナーを増やしたいという企業と積極的に繋がっていきたいです。