Ajax での複数項目の JSON ファイルの取得と読み込みについて

ホーム
BLOG
技術ブログ
Ajax での複数項目の JSON ファイルの取得と読み…

技術ブログ
2018.10.19

Ajax での複数項目の JSON ファイルの取得と読み込みについて

今更ですがAjaxでのファイルの読み込みについてです。

Dataセットが複数あるようなJSONファイルの読み込みを行います。

JOSNの形式はこんな感じのデータにします。


{
    "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
        }
    ]
}

{

"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

}

]

}

データ関連の構造を複数持っていて階層的に取り込みを行う必要があります。

グラフ関連の処理でよく使われますね。

今回は描画関連の処理ではなく、リストにデータを格納して行くという処理を実施して見ます。


$.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');
});