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

Question

我有一个 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

我该怎么做？我假设我必须遍历数组并找到它，但每次尝试时都会出现“未定义”或 [object Object] 错误。

最终目标是将该数字放入图表中并绘制储蓄图；我似乎无法从数组中获取正确的数字到变量中，所以我可以在我的 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");
        },
    });
}

Answer 1

想通了！

需要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");
    },
});