从 JSON 循环和提取值并推送到数组

Question

我有一个 JSON 文件，我需要在其中访问其中一个值，该值是一个包含许多键和值的对象，这些键和值是进一步的对象。像这样：

"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
    }
}

我已经能够将键值（即Fri Jul 28, 2017）存储在一个数组中，该数组用于将数据传递到视图中的图表。这部分工作正常。

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

我只需要 JSON 文件中subTotal_USD 下的数据在我的图表中显示为数据。

问题

如何遍历lineChart 对象中的每个属性，从subTotal_USD 键中提取值，并将其存储在一个数组中，以便在图表中显示数据？我觉得我让这变得比需要的更复杂。

Answer 1

您已经有一组键，您可以使用 forEach、map、reduce 等循环遍历这些键。

您可以使用 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)
);

当然，有很多方法可以遍历对象的键。就个人而言，我更喜欢循环一次：

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"];
    }
}