Looping and extracting values from JSON and pushing to Arrays

Question

I have a JSON file in which I need to access one of it's values which is an object containing a number of keys and values which are further objects. Like so:

"lineChart": {
    "Fri Jul 28, 2017": {
        "renewalFee_EUR": 1165,
        "extensionFee_EUR": 0,
        "renewalFee_USD": 5941.5,
        "extensionFee_USD": 0,
        "processingFee_USD": 25,
        "expressFee_USD": 0,
        "urgentFee_USD": 0,
        "latePayPenalty_USD": 0,
        "fxRate": 5.1,
        "subTotal_USD": 5966.5
    },
    "Tue Aug 1, 2017": {
        "renewalFee_EUR": 1165,
        "extensionFee_EUR": 0,
        "renewalFee_USD": 2411.55,
        "extensionFee_USD": 0,
        "processingFee_USD": 25,
        "expressFee_USD": 0,
        "urgentFee_USD": 0,
        "latePayPenalty_USD": 0,
        "fxRate": 2.07,
        "subTotal_USD": 2436.55
    }
}

I have been able to store the key values ie Fri Jul 28, 2017 in an Array which is being used to pass data to a chart in the view. This part is working fine.

var caLine = vm.graph.lineChart; 
// THIS STORES THE RETURNED VALUE(GRAPH DATA) FROM A REST REQUEST
//IN MY ROUTER FOLDER (USING ANGULARJS) 

lineLabelArr = [];

for (var prop in caLine) {
    if (caLine.hasOwnProperty(prop)) {
        lineLabelArr.push(prop)
    }
}

vm.labels = lineLabelArr; //VM.LABELS IS UED TO BIND DATA TO THE CHART'S DIRECTIVES

I only need the data under subTotal_USD in the JSON file to display as data in my chart.

Question

How do I loop through each property in the lineChart object, extract the value from the subTotal_USD key, and store it in an Array which I can use to display data within my chart? I feel I am making this more complicated than need be.

Answer 1

You already have an array of keys which you can loop over using forEach , map , reduce , etc.

You can create a new array out of the array of keys by using map :

 const lineChart = {"Fri Jul 28, 2017":{renewalFee_EUR:1165,extensionFee_EUR:0,renewalFee_USD:5941.5,extensionFee_USD:0,processingFee_USD:25,expressFee_USD:0,urgentFee_USD:0,latePayPenalty_USD:0,fxRate:5.1,subTotal_USD:5966.5},"Tue Aug 1, 2017":{renewalFee_EUR:1165,extensionFee_EUR:0,renewalFee_USD:2411.55,extensionFee_USD:0,processingFee_USD:25,expressFee_USD:0,urgentFee_USD:0,latePayPenalty_USD:0,fxRate:2.07,subTotal_USD:2436.55}}; const lineLabelArr = []; for (var prop in lineChart) { if (lineChart.hasOwnProperty(prop)) { lineLabelArr.push(prop) } } console.log( lineLabelArr.map(key => lineChart[key].subTotal_USD) ); 

Of course, there are many ways to loop over an object's keys. Personally, I'd prefer to do it one loop:

 const lineChart = {"Fri Jul 28, 2017":{renewalFee_EUR:1165,extensionFee_EUR:0,renewalFee_USD:5941.5,extensionFee_USD:0,processingFee_USD:25,expressFee_USD:0,urgentFee_USD:0,latePayPenalty_USD:0,fxRate:5.1,subTotal_USD:5966.5},"Tue Aug 1, 2017":{renewalFee_EUR:1165,extensionFee_EUR:0,renewalFee_USD:2411.55,extensionFee_USD:0,processingFee_USD:25,expressFee_USD:0,urgentFee_USD:0,latePayPenalty_USD:0,fxRate:2.07,subTotal_USD:2436.55}}; const labels = []; const subTotals = []; Object.keys(lineChart).forEach(day => { const dayData = lineChart[day]; labels.push(day); subTotals.push(dayData.subTotal_USD); }); console.log("Labels:", labels); console.log("subTotals:", subTotals); 

Answer 2

for(var i = 0; i < caLine.length; i++) {
    var datObj = caLine[i];
    if (datObj != null) {
        var subTotoalUSD = datObj["subTotal_USD"];
    }
}