如何访问JavaScript数组中的项目?

时间:2016-10-14 16:39:30

标签: javascript arrays json ajax get

我有一个AJAX GET,它返回一个如下所示的数组:

{
“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");
        },
    });
}

1 个答案:

答案 0 :(得分: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");
    },
});