JavaScript data manipulation: Determining percentage change within a nested JSON structure

Question

JavaScript data manipulation: Determining percentage change within a nested JSON structure

Provided is a JSON file structured like this...

data =[
  {
  key: "london",
  values: [
   {day: "2020-01-01", city: "london", value: 10},
   {day: "2020-01-02", city: "london", value: 20},
   {day: "2020-01-03", city: "london", value: 30},
   {day: "2020-01-04", city: "london", value: 30},
   {day: "2020-01-05", city: "london", value: 30},
   {day: "2020-01-06", city: "london", value: 30}
  ]
  },
  {
  key: "berlin",
  values: [
   {day: "2020-01-01", city: "berlin", value: 10},
   {day: "2020-01-02", city: "berlin", value: 15},
   {day: "2020-01-03", city: "berlin", value: 30},
   {day: "2020-01-04", city: "berlin", value: 30},
   {day: "2020-01-05", city: "berlin", value: 30},
   {day: "2020-01-06", city: "berlin", value: 45}
  ]
  },
  {
  key: "rome",
  values: [
   {day: "2020-01-01", city: "rome", value: 10},
   {day: "2020-01-02", city: "rome", value: 12},
   {day: "2020-01-03", city: "rome", value: 6},
   {day: "2020-01-04", city: "rome", value: 9},
   {day: "2020-01-05", city: "rome", value: 27},
   {day: "2020-01-06", city: "rome", value: 36}
  ]
  }]

I'm interested in calculating the daily percentage change in the series using JavaScript. The expected output would be as follows, with the city information removed for less repetition.

data =[
  {
  key: "london",
  values: [
   {day: "2020-01-01", value: 10, perc: 0},
   {day: "2020-01-02", value: 20, perc: 1},
   {day: "2020-01-03", value: 30, perc: 1},
   {day: "2020-01-04", value: 30, perc: 0},
   {day: "2020-01-05", value: 30, perc: 0},
   {day: "2020-01-06", value: 30, perc: 0}
  ]
  },
  {
  key: "berlin",
  values: [
   {day: "2020-01-01", value: 10, perc: 0},
   {day: "2020-01-02", value: 15, perc: 0.5},
   {day: "2020-01-03", value: 30, perc: 1},
   {day: "2020-01-04", value: 30, perc: 0},
   {day: "2020-01-05", value: 30, perc: 0},
   {day: "2020-01-06", value: 45, perc: 0.5}
  ]
  },
  {
  key: "rome",
  values: [
   {day: "2020-01-01", value: 10, perc: 0},
   {day: "2020-01-02", value: 12, perc: 0.2},
   {day: "2020-01-03", value: 6, perc: -0.5},
   {day: "2020-01-04", value: 9, perc: 0.5},
   {day: "2020-01-05", value: 27, perc: 2},
   {day: "2020-01-06", value: 36, perc: 0.33}
  ]
  }]

Additionally, how can I calculate percentage change for different time intervals (every two days, week, etc.) and achieve an output like the example below? (Displaying percentage change every two days)

data =[
  {
  key: "london",
  values: [
   {day: "2020-01-01", value: 10, perc: 0},
   {day: "2020-01-03", value: 30, perc: 2},
   {day: "2020-01-05", value: 30, perc: 0},
  ]
  },
  {
  key: "berlin",
  values: [
   {day: "2020-01-01", value: 10, perc: 0},
   {day: "2020-01-03", value: 30, perc: 2},
   {day: "2020-01-05", value: 30, perc: 0},
  ]
  },
  {
  key: "rome",
  values: [
   {day: "2020-01-01", value: 10, perc: 0},
   {day: "2020-01-03", value: 6, perc: -0.4},
   {day: "2020-01-05", value: 27, perc: 4.5},
  ]
  }]

javascript json data-wrangling

Answer 1

Answer №1

Here is my unique perspective on the scenario, delving into the additional query.

Feel free to reach out with any queries - this marks my debut on stackoverflow!

// Here lies your initial dataset
const data = [
  {
    key: "paris",
    values: [
      {day: "2020-01-01", city: "paris", value: 15},
      {day: "2020-01-02", city: "paris", value: 25},
      {day: "2020-01-03", city: "paris", value: 35},
      {day: "2020-01-04", city: "paris", value: 45},
      {day: "2020-01-05", city: "paris", value: 55},
      {day: "2020-01-06", city: "paris", value: 65}
    ]
  },
  // Add additional city data here if needed
];

// Parsing and manipulating the input data
const processedData = data.map((obj) => {
  return {...obj, values: obj.values.map((value, i) => {
    delete value['city'];

    if (i === 0)
       return { ...value, perc: 0 };

    const currentValue = value.value;
    const currentDay = new Date(value.day);

    const previousValue = obj.values[i-1].value;
    const previousDay = new Date(obj.values[i-1].day);

    const dayTimeDiff = Math.abs(currentDay - previousDay);
    const dayDiff = Math.ceil(dayTimeDiff / (1000 * 60 * 60 * 24));

    const percentDiff = (currentValue - previousValue) / previousValue / dayDiff;

    return { ...value, perc: percentDiff };
  })}
});

console.log(processedData);

Answer 2

Here is my unique perspective on the scenario, delving into the additional query.

Feel free to reach out with any queries - this marks my debut on stackoverflow!

// Here lies your initial dataset
const data = [
  {
    key: "paris",
    values: [
      {day: "2020-01-01", city: "paris", value: 15},
      {day: "2020-01-02", city: "paris", value: 25},
      {day: "2020-01-03", city: "paris", value: 35},
      {day: "2020-01-04", city: "paris", value: 45},
      {day: "2020-01-05", city: "paris", value: 55},
      {day: "2020-01-06", city: "paris", value: 65}
    ]
  },
  // Add additional city data here if needed
];

// Parsing and manipulating the input data
const processedData = data.map((obj) => {
  return {...obj, values: obj.values.map((value, i) => {
    delete value['city'];

    if (i === 0)
       return { ...value, perc: 0 };

    const currentValue = value.value;
    const currentDay = new Date(value.day);

    const previousValue = obj.values[i-1].value;
    const previousDay = new Date(obj.values[i-1].day);

    const dayTimeDiff = Math.abs(currentDay - previousDay);
    const dayDiff = Math.ceil(dayTimeDiff / (1000 * 60 * 60 * 24));

    const percentDiff = (currentValue - previousValue) / previousValue / dayDiff;

    return { ...value, perc: percentDiff };
  })}
});

console.log(processedData);

Answer 3

Answer №2

To start off, you have the ability to modify each value within the values array:

const data = [
  {
  key: "paris",
  values: [
   {day: "2020-01-01", city: "paris", value: 10},
   {day: "2020-01-02", city: "paris", value: 20},
   {day: "2020-01-03", city: "paris", value: 30},
   {day: "2020-01-04", city: "paris", value: 30},
   {day: "2020-01-05", city: "paris", value: 30},
   {day: "2020-01-06", city: "paris", value: 30}
  ]
  },
  {
  key: "madrid",
  values: [
   {day: "2020-01-01", city: "madrid", value: 10},
   {day: "2020-01-02", city: "madrid", value: 15},
   {day: "2020-01-03", city: "madrid", value: 30},
   {day: "2020-01-04", city: "madrid", value: 30},
   {day: "2020-01-05", city: "madrid", value: 30},
   {day: "2020-01-06", city: "madrid", value: 45}
  ]
  },
  {
  key: "amsterdam",
  values: [
   {day: "2020-01-01", city: "amsterdam", value: 10},
   {day: "2020-01-02", city: "amsterdam", value: 12},
   {day: "2020-01-03", city: "amsterdam", value: 6},
   {day: "2020-01-04", city: "amsterdam", value: 9},
   {day: "2020-01-05", city: "amsterdam", value: 27},
   {day: "2020-01-06", city: "amsterdam", value: 36}
  ]
  }]

const newData = data.map((info) => {

      const n = info.values.length;
      const valuesCopy = info.values.map((info) => info.value);

      for (let i = 0; i < n; i++) {

         const currentValue = valuesCopy[i];
         const previousValue = valuesCopy[i - 1];
         // calculate the percentage
         const percentage = (currentValue - previousValue) / previousValue;

        // if percentage is NaN, return 0
        // if percentage is less than 1, return 2 decimal places
        // otherwise return percentage
        info.values[i].value = !percentage ? 0 : percentage < 1 ? percentage.toFixed(2) : percentage;
      }

    return info;
  })

 console.log(JSON.stringify(newData, null, 2));

Answer 4

To start off, you have the ability to modify each value within the values array:

const data = [
  {
  key: "paris",
  values: [
   {day: "2020-01-01", city: "paris", value: 10},
   {day: "2020-01-02", city: "paris", value: 20},
   {day: "2020-01-03", city: "paris", value: 30},
   {day: "2020-01-04", city: "paris", value: 30},
   {day: "2020-01-05", city: "paris", value: 30},
   {day: "2020-01-06", city: "paris", value: 30}
  ]
  },
  {
  key: "madrid",
  values: [
   {day: "2020-01-01", city: "madrid", value: 10},
   {day: "2020-01-02", city: "madrid", value: 15},
   {day: "2020-01-03", city: "madrid", value: 30},
   {day: "2020-01-04", city: "madrid", value: 30},
   {day: "2020-01-05", city: "madrid", value: 30},
   {day: "2020-01-06", city: "madrid", value: 45}
  ]
  },
  {
  key: "amsterdam",
  values: [
   {day: "2020-01-01", city: "amsterdam", value: 10},
   {day: "2020-01-02", city: "amsterdam", value: 12},
   {day: "2020-01-03", city: "amsterdam", value: 6},
   {day: "2020-01-04", city: "amsterdam", value: 9},
   {day: "2020-01-05", city: "amsterdam", value: 27},
   {day: "2020-01-06", city: "amsterdam", value: 36}
  ]
  }]

const newData = data.map((info) => {

      const n = info.values.length;
      const valuesCopy = info.values.map((info) => info.value);

      for (let i = 0; i < n; i++) {

         const currentValue = valuesCopy[i];
         const previousValue = valuesCopy[i - 1];
         // calculate the percentage
         const percentage = (currentValue - previousValue) / previousValue;

        // if percentage is NaN, return 0
        // if percentage is less than 1, return 2 decimal places
        // otherwise return percentage
        info.values[i].value = !percentage ? 0 : percentage < 1 ? percentage.toFixed(2) : percentage;
      }

    return info;
  })

 console.log(JSON.stringify(newData, null, 2));

Answer 5

Answer №3

Here's a demonstration using basic for loops along with comments:

const data =[
  {
  key: "paris",
  values: [
   {day: "2021-01-01", city: "paris", value: 12},
   {day: "2021-01-02", city: "paris", value: 22},
   {day: "2021-01-03", city: "paris", value: 32},
   {day: "2021-01-04", city: "paris", value: 34},
   {day: "2021-01-05", city: "paris", value: 36},
   {day: "2021-01-06", city: "paris", value: 38}
  ]
  },
  {
  key: "madrid",
  values: [
   {day: "2021-01-01", city: "madrid", value: 18},
   {day: "2021-01-02", city: "madrid", value: 23},
   {day: "2021-01-03", city: "madrid", value: 35},
   {day: "2021-01-04", city: "madrid", value: 37},
   {day: "2021-01-05", city: "madrid", value: 39},
   {day: "2021-01-06", city: "madrid", value: 42}
  ]
  }
];

// Initialize an empty array for results
const results = [];

// Iterate through the data
for(let i = 0; i < data.length; i++) {
  // Create a new object for the city
  const city = {
    key: data[i].key,
    values: []
  };
  
  // Shortcut to access the values
  const dVal = data[i].values
  
  // Loop through the values in each city entry
  for(let j = 0; j < dVal.length; j++) {
    // Set previous value or current if it is the first cycle
    const prev = (j !== 0) ? dVal[j-1].value : dVal[j].value;
    // Current value
    const cur = dVal[j].value;
    // Calculate percentage difference
    let percDiff = (cur - prev) / prev;
    // Limit to two decimal places
    percDiff = parseFloat(percDiff.toFixed(2));
    // Add to city object
    city.values.push({
      day: dVal[j].day,
      value: dVal[j].value,
      perc: percDiff
    });
  }
  
  // Add city object to results array
  results.push(city);
}

// Display results
console.log(results);

In response to your second question, simply remove unnecessary day entries from the array and then pass the updated array to the same function. It will calculate the difference between entries whether it is daily or weekly.

Answer 6

Here's a demonstration using basic for loops along with comments:

const data =[
  {
  key: "paris",
  values: [
   {day: "2021-01-01", city: "paris", value: 12},
   {day: "2021-01-02", city: "paris", value: 22},
   {day: "2021-01-03", city: "paris", value: 32},
   {day: "2021-01-04", city: "paris", value: 34},
   {day: "2021-01-05", city: "paris", value: 36},
   {day: "2021-01-06", city: "paris", value: 38}
  ]
  },
  {
  key: "madrid",
  values: [
   {day: "2021-01-01", city: "madrid", value: 18},
   {day: "2021-01-02", city: "madrid", value: 23},
   {day: "2021-01-03", city: "madrid", value: 35},
   {day: "2021-01-04", city: "madrid", value: 37},
   {day: "2021-01-05", city: "madrid", value: 39},
   {day: "2021-01-06", city: "madrid", value: 42}
  ]
  }
];

// Initialize an empty array for results
const results = [];

// Iterate through the data
for(let i = 0; i < data.length; i++) {
  // Create a new object for the city
  const city = {
    key: data[i].key,
    values: []
  };
  
  // Shortcut to access the values
  const dVal = data[i].values
  
  // Loop through the values in each city entry
  for(let j = 0; j < dVal.length; j++) {
    // Set previous value or current if it is the first cycle
    const prev = (j !== 0) ? dVal[j-1].value : dVal[j].value;
    // Current value
    const cur = dVal[j].value;
    // Calculate percentage difference
    let percDiff = (cur - prev) / prev;
    // Limit to two decimal places
    percDiff = parseFloat(percDiff.toFixed(2));
    // Add to city object
    city.values.push({
      day: dVal[j].day,
      value: dVal[j].value,
      perc: percDiff
    });
  }
  
  // Add city object to results array
  results.push(city);
}

// Display results
console.log(results);

In response to your second question, simply remove unnecessary day entries from the array and then pass the updated array to the same function. It will calculate the difference between entries whether it is daily or weekly.

JavaScript data manipulation: Determining percentage change within a nested JSON structure

Answer №1

Answer №2

Answer №3

Similar questions

Struggling with JavaScript's getElementById function

Encountering issues with updating state object in setState function

Issue encountered while attempting to load JSON data into Hive

Achieving success despite facing rejection

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

Extract Data from JSON Array using Jquery

Discover the power of utilizing JavaScript to sort through table rows by filtering them based on the selections of multiple checkbox

Tips for converting intricate JSON nested data into CSV using Python?

Customize the appearance of the Vue.js datepicker starting from today's date

Having trouble with implementing both filter and infinite scroll simultaneously in an Ionic list?

How to interrupt a JQuery animation and restart it from the middle?

AngularJS allows for dynamic routing within applications

Exploring the power of nested loops within an AJAX call in Angular

Using Regex with JavaScript while ignoring letter case

Passing a JavaScript Object to an ASP.NET Handler

The captivating logo animation of Google Chrome

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

What is preventing me from returning a JSON object in Perl script?

ng-required is ineffective when used with number inputs that have a minimum value requirement

Learn how to run a Linux bash command by clicking a button, where the command is generated from user input