Operating in loops and retrieving data from JSON, then adding them to collections

Question

Operating in loops and retrieving data from JSON, then adding them to collections

In a JSON file, there is an object called "lineChart" with multiple keys and values. Each value contains various other objects. Here's an example:

"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 managed to extract the key values like Fri Jul 28, 2017 and store them in an Array for chart data representation.

var caLine = vm.graph.lineChart; 

lineLabelArr = [];

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

vm.labels = lineLabelArr;

Now, I want to specifically access the data under the subTotal_USD key in the JSON file and display it on my chart.

Question

How can I iterate through each property in the lineChart object, retrieve the values from the subTotal_USD key, and save them in an Array for chart data usage? I feel like I might be overcomplicating things.

javascript angularjs arrays json

Answer 1

Answer №1

If you already have an array of keys, there are various methods like forEach, map, reduce, etc., that you can use to loop over them.

To create a new array from the existing array of keys, you can utilize the map method:

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)
);

There are multiple ways to iterate over an object's keys. Personally, I prefer doing it within a single 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

If you already have an array of keys, there are various methods like forEach, map, reduce, etc., that you can use to loop over them.

To create a new array from the existing array of keys, you can utilize the map method:

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)
);

There are multiple ways to iterate over an object's keys. Personally, I prefer doing it within a single 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 3

Answer №2

iterating through the caLine array to retrieve subTotal_USD values for each data object.

Answer 4

iterating through the caLine array to retrieve subTotal_USD values for each data object.

Operating in loops and retrieving data from JSON, then adding them to collections

Answer №1

Answer №2

Similar questions

When incorporating sequelize's belongsTo and hasOne methods, you may encounter an issue where the call stack size surpass

Is it advisable to display my JSON data in the console before utilizing Firebase $save or $add?

Expanding the filtering capabilities in AngularJS with additional selection options

Unraveling the parent data from wp_get_themes in WordPress

What is the extent of a variable's visibility within an ng-repeat directive in AngularJS?

Bootstrap tab toggle feature

Skipping element submission in AngularJS when the element is hidden

Sending a directive as an argument to a parent directive function

Guidance on sharing an image on Twitter using Node.js

Adding fresh data to an array in mongoose

The conditional ng-class styling will be applied to each and every div on the page

What is the best placement for the deviceready event in a multi-page PhoneGap application?

I'm having trouble establishing a connection between Firebase Realtime Database and Vue.js

Creating a JSON object in AngularJS is a simple and straightforward process

What is the best way to utilize arrays within a loop to generate various outputs?

Add a checkbox element to a web API using ReactJS

What is the best way to add an element directly following another within the document's head section?

What are the steps to develop a progress bar using PHP and JavaScript?

Steps to assign a JSON file to an array within an object in Angular

What is the best way to ensure that a server response is received before initiating an Apollo Graph QL Query