2016-10-14 8 views
0

私は、次のような配列を返しますAJAXのGETを持っている:JavaScript配列のアイテムにアクセスする方法は?

{ 
“periodStart” : “2016-10-09T06:00:00Z", 
“periodEnd":"2016-10-16T06:00:00Z", 
“nextPageStart":null, 
“prevPageStart":"2016-10-02T00:00:00Z", 
“period":"WEEKLY", 
“powerInfo":null, 
“totalSavings": 
5.8863351343078, 

“savings”:[ 
{ 
“maxTemperature":75, 
“acRunSeconds":16432, 
“savedRunSeconds":3266, 
“kwhSaved":60.342324672236224, 
”periodStart":"2016-10-09T06:00:00Z", 
“savedMoney":1.5085581168059057, 
“normalMoneyCost”:1.6226692279170167, 
“periodName":"Sunday" 
}, 
{ 
“maxTemperature":74, 
“acRunSeconds":6822 
,”savedRunSeconds":5657, 
“kwhSaved":76.18189032209128, 
“periodStart":"2016-10-10T06:00:00Z", 
“savedMoney":1.904547258052282, 
“normalMoneyCost":1.951922258052282, 
“periodName":"Monday" 
}, 
{ 
“maxTemperature":62, 
“acRunSeconds":9311, 
“savedRunSeconds":12, 
“kwhSaved":28.03764418071857 
,”periodStart”:"2016-10-11T06:00:00Z", 
“savedMoney":0.7009411045179643, 
“normalMoneyCost":0.7656008267401866, 
“periodName":"Tuesday" 
}, 
{ 
“maxTemperature":78, 
“acRunSeconds":11275, 
“savedRunSeconds":1431, 
“kwhSaved":34.191927009102564, 
“periodStart":"2016-10-12T06:00:00Z", 
“savedMoney":0.8547981752275642, 
“normalMoneyCost":0.9330967863386753, 
“periodName":"Wednesday" 
}, 
{ 
“maxTemperature":78, 
“acRunSeconds":17967, 
“savedRunSeconds":11864, 
“kwhSaved":26.880751977008043, 
“periodStart":"2016-10-13T06:00:00Z", 
“savedMoney":0.6720187994252012 
,”normalMoneyCost":0.7967896327585345, 
“periodName":"Thursday" 
}, 
{ 
“maxTemperature":78, 
“acRunSeconds":7649, 
“savedRunSeconds”:2008, 
“kwhSaved":4.5674527454968805, 
“periodStart":"2016-10-14T06:00:00Z", 
“savedMoney":0.11418631863742201, 
“normalMoneyCost":0.16730437419297756, 
“periodName”:"Friday" 
}, 
{ 
"maxTemperature":73, 
“acRunSeconds":6174, 
“savedRunSeconds":1876, 
“kwhSaved":5.251414465658444, 
“periodStart":"2016-10-15T06:00:00Z", 
“savedMoney":0.1312853616414611, 
“normalMoneyCost”0.1741603616414611, 
“periodName":"Saturday" 
} 
], 
“temperatureUnit":"F", 
“currency": 
{ 
“name":"USD", 
“symbol":"$" 
} 
} 

私は配列から個々の値をつかむにはどうすればよいですか?例えば は、私は、配列に見出し 『savedMoney』の値「1.5085581168059057" を返し、設定したい場合は、それ以下の変数に等しい:?

var savings_graph1 = 1.5085581168059057

が、私はこれを行うだろうどのように私は希望と仮定配列をループして見つける必要がありますが、試みるたびに「未定義」または[オブジェクトオブジェクト]エラーが発生します。

最後の目標は、その数値をグラフに配置して節約することです。配列から変数に正しい数値を取得してJavaScriptに使用できるようです。

配列の番号は、次のD3.jsの.data()フィールドに配置され、チャートの番号をグラフ表示します。

vizs[0] 
    .data(280)        // current value 
    .min(0)         // min value 
    .max(100)        // max value 
    .capRadius(1)       // Sets the curvature of the ends of the arc. 
    .startAngle(250)      // Angle where progress bar starts 
    .endAngle(110)       // Angle where the progress bar stops 
    .arcThickness(.12)      // The thickness of the arc (ratio of radius) 
    .label(function (d,i) {     // The 'label' property allows us to use a dynamic function for labeling. 
     return d3.format("$,.2f")(d); 
    }); 

vizs[1] 
    .data(550)        // current value 
    .min(0)         // min value 
    .max(200)        // max value 
    .capRadius(1)       // Sets the curvature of the ends of the arc. 
    .startAngle(210) 
    .endAngle(150) 
    .arcThickness(.07) 
    .label(function (d,i) { return d3.format(".0f")(d); }); 

vizs[2] 
    .data(820)        // current value 
    .min(0)         // min value 
    .max(300)        // max value 
    .capRadius(1)       // Sets the curvature of the ends of the arc. 
    .startAngle(180) 
    .endAngle(180) 
    .arcThickness(.04) 
    .label(function (d,i) { return d3.format(".0f")(d) + "%"; }); 

次のように最終的な結果は次のようになります完了AJAX GET要求は、データがアレイから取り出され、送信された変数に、変数はD3コードで使用され、データはその後終了するためのグラフ上にプロットされていますユーザー。誰かが配列からJavascript変数にデータを取得する方法を知っていれば、私は非常に感謝しています。

AJAX要求は、次のようになります。

function getSavings() { 

    var baseUrl = $('#stage_select').find(":selected").val(); 

    $('#date-output').html("UTC date now: " + moment.utc().format()); 

    var url = baseUrl + "/savings/acunits/{acid}/random"; 

    var username = document.getElementById('email').value; 
    var password = document.getElementById('password').value; 
    var data = {"email" : username , "password" : password}; 
    $('#output').append("request " + url + "\n"); 
    $.ajax({ 
     type: "GET", 
     url: url, 
     dataType: 'json', 
     contentType: 'application/json', 
     data: JSON.stringify(data), 
     processData: false, 
     async: true, 
     beforeSend: function (xhr) { 
     xhr.setRequestHeader ('Authorization', 'Basic ' + btoa(username + ':' + password)); 
     }, 
     success: function (res) { 
      $('#output').append("response -> " + JSON.stringify(res) + "\n\n"); 
     }, 
     error: function (jqxhr) { 
      $('#output').append("response " + JSON.stringify(jqxhr.responseText) + "\n\n"); 
     }, 
    }); 
} 
+3

[アクセス/プロセス(ネストされた)オブジェクト、アレイまたはJSON]の可能な重複(http://stackoverflow.com/questions/11922383/access-process -nested-objects-arrays-or-json) – Teemu

+0

私はその解決策を試して、 "undefined"を返しました。 – Ken

+0

'result.savings [0] .savedMoney'を使用できます。ここで' result'はAJAXレスポンスです – Jaco

答えて

0

はそれを考え出しました!次のようにevalを必要

配列:その一回

var all = eval("(function(){return " + array + ";})()"); 

alert(all.savings[0].savedMoney);が働いて行われました。

ありがとうJaco、あなたの答えは最も近いものでした。

完全AJAX呼び出しは次のようになります

$.ajax({ 
    type: "GET", 
    url: url, 
    dataType: 'json', 
    contentType: 'application/json', 
    data: JSON.stringify(data), 
    processData: false, 
    async: true, 
    beforeSend: function (xhr) { 
    xhr.setRequestHeader ('Authorization', 'Basic ' + btoa(username + ':' + password)); 
    }, 
    success: function (res) { 
    $('#output').append(JSON.stringify(res)); 
    var firstDivContent = document.getElementById('output'); 
    var array = firstDivContent.innerHTML; 
    var all = eval("(function(){return " + array + ";})()"); 
    alert(all.savings[0].savedMoney); 

    }, 
    error: function (jqxhr) { 
     $('#output').append("response " + JSON.stringify(jqxhr.responseText) + "\n\n"); 
    }, 
}); 
関連する問題