I have made an AJAX call that retrieves data in the form of an array structured as shown below:

{
“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":"$"
}
}

How can I extract specific values from this array? For example, if I wanted to retrieve the value "1.5085581168059057" under the "savedMoney" heading and assign it to a variable like this:

var savings_graph1 = 1.5085581168059057

What would be the best approach to achieve this? It seems like looping through the array might be necessary, but my attempts so far have resulted in errors such as "undefined" or [object Object].

The ultimate objective is to present this number on a graph for visual representation of the savings; however, I'm struggling to correctly fetch the desired value from the array into a variable that can be utilized within my JavaScript code.

This extracted number from the array will be assigned to the .data() field in the following D3.js code snippet that generates the graph:

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) + "%"; });

In summary, the process involves completing an AJAX GET request, extracting relevant data from the array to a variable, using this variable in the D3 code, and plotting the data on a graph for user visualization. Any insights on effectively fetching the data from the array to a JavaScript variable are highly appreciated.

The structure of the AJAX request is outlined below:

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