Merge arrays in map function based on label and aggregate information

Question

Merge arrays in map function based on label and aggregate information

In my possession is an array filled with data from various streaming channels, categorized by shift (Morning and Afternoon).

I dedicated the night to experimenting with different functions like reduce, but unfortunately, I hit a wall and couldn't grasp its functionality.

var array = [{"label":"morning","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"None":"0.00"},{"Netflix":"55.00"},{"Other":"20.00"}]}...]

The desired outcome:

To calculate the total sum of all streaming channels, divided based on the number of objects per shift (morning and afternoon).

[{"label":"morning","data":[{"Amazon Prime":"16.66"},{"AppleTV":"0.00"},{"HBO Max":"16.66"},{"None":"16.66"},{"Netflix":"43.33"},{"Other":"6.66"}]}...]

Any assistance or explanation would be greatly appreciated!

javascript arrays

Answer 1

Answer №1

Let's break down this problem into manageable steps. Initially, we can use the reduce method to iterate over the data and construct an object. The objective here is to create an object where each key represents a label for easy merging of similar keys. Upon reviewing the task at hand, we note that:

The numerical values are in string format, making arithmetic operations challenging.
Merging subarrays is complex and could benefit from conversion to objects as well.

let array = [{"label":"manha","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"Nenhuma":"0.00"},{"Netflix":"55.00"},{"Outro":"20.00"}]},{"label":"manha","data":[{"Amazon Prime":"50.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"Nenhuma":"0.00"},{"Netflix":"25.00"},{"Outro":"0.00"}]},{"label":"manha","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"0.00"},{"Nenhuma":"50.00"},{"Netflix":"50.00"},{"Outro":"0.00"}]},{"label":"tarde","data":[{"Amazon Prime":"10.00"},{"AppleTV":"11.00"},{"HBO Max":"0.00"},{"Nenhuma":"50.00"},{"Netflix":"9.00"},{"Outro":"20.00"}]},{"label":"tarde","data":[{"Amazon Prime":"0...

// The code for initial attempt goes here

%

For the second step, our approach involves:

Converting more arrays to objects
- Object methods such as in can be utilized once we have objects
Using parseFloat to convert strings to numbers
Collating information to generate raw data effectively.

let array = [{"label"...

// The code for the second attempt goes here

%

Finally, in the last phase, we average out the remaining data arrays and transform the numeric outcomes back into string format.

let array = [{"label"...

// The final code snippet for averaging data

%

A few concluding points regarding this solution compared to the original question provided.

I applied toFixed(2) for rounding up:
- This results in "16.67" instead of "16.66" for the "manha" averages
For "tarde", I obtained "37.50" (i.e., (50 + 25) / 2 === 37.50) instead of "36.00"
All other output values align with the requirements specified in the question

Answer 2

Let's break down this problem into manageable steps. Initially, we can use the reduce method to iterate over the data and construct an object. The objective here is to create an object where each key represents a label for easy merging of similar keys. Upon reviewing the task at hand, we note that:

The numerical values are in string format, making arithmetic operations challenging.
Merging subarrays is complex and could benefit from conversion to objects as well.

let array = [{"label":"manha","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"Nenhuma":"0.00"},{"Netflix":"55.00"},{"Outro":"20.00"}]},{"label":"manha","data":[{"Amazon Prime":"50.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"Nenhuma":"0.00"},{"Netflix":"25.00"},{"Outro":"0.00"}]},{"label":"manha","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"0.00"},{"Nenhuma":"50.00"},{"Netflix":"50.00"},{"Outro":"0.00"}]},{"label":"tarde","data":[{"Amazon Prime":"10.00"},{"AppleTV":"11.00"},{"HBO Max":"0.00"},{"Nenhuma":"50.00"},{"Netflix":"9.00"},{"Outro":"20.00"}]},{"label":"tarde","data":[{"Amazon Prime":"0...

// The code for initial attempt goes here

%

For the second step, our approach involves:

Converting more arrays to objects
- Object methods such as in can be utilized once we have objects
Using parseFloat to convert strings to numbers
Collating information to generate raw data effectively.

let array = [{"label"...

// The code for the second attempt goes here

%

Finally, in the last phase, we average out the remaining data arrays and transform the numeric outcomes back into string format.

let array = [{"label"...

// The final code snippet for averaging data

%

A few concluding points regarding this solution compared to the original question provided.

I applied toFixed(2) for rounding up:
- This results in "16.67" instead of "16.66" for the "manha" averages
For "tarde", I obtained "37.50" (i.e., (50 + 25) / 2 === 37.50) instead of "36.00"
All other output values align with the requirements specified in the question

Answer 3

Answer №2

This code snippet may appear a bit lengthier than you anticipated, but rest assured that it will fulfill your requirements.

let newArray = []
for(element of originalArray) {
  const currentLabel = element.label
  let labelIndex = -1
  for(let j = 0; j < newArray.length; ++j) {
    if(newArray[j].label === currentLabel) labelIndex = j
  }
  if(labelIndex >= 0) {
    for(let k = 0; k < element.data.length; ++k) {
      const dataKey = Object.keys(element.data[k])
      newArray[labelIndex].data[k][dataKey] = parseInt(newArray[labelIndex].data[k][dataKey])
      newArray[labelIndex].data[k][dataKey] += parseInt(element.data[k][dataKey])
    }
  } else {
    newArray.push(element)
  }
}

const labelOccurrences = originalArray.reduce(function (accumulator, currentElement) {
  return accumulator[currentElement.label] ? ++accumulator[currentElement.label] : accumulator[currentElement.label] = 1, accumulator
}, {});

for(item of newArray) {
  for(dataItem of item.data) {
    dataItem[Object.keys(dataItem)] = (dataItem[Object.keys(dataItem)] / labelOccurrences[item.label]).toFixed(2)
  }
}

Answer 4

This code snippet may appear a bit lengthier than you anticipated, but rest assured that it will fulfill your requirements.

let newArray = []
for(element of originalArray) {
  const currentLabel = element.label
  let labelIndex = -1
  for(let j = 0; j < newArray.length; ++j) {
    if(newArray[j].label === currentLabel) labelIndex = j
  }
  if(labelIndex >= 0) {
    for(let k = 0; k < element.data.length; ++k) {
      const dataKey = Object.keys(element.data[k])
      newArray[labelIndex].data[k][dataKey] = parseInt(newArray[labelIndex].data[k][dataKey])
      newArray[labelIndex].data[k][dataKey] += parseInt(element.data[k][dataKey])
    }
  } else {
    newArray.push(element)
  }
}

const labelOccurrences = originalArray.reduce(function (accumulator, currentElement) {
  return accumulator[currentElement.label] ? ++accumulator[currentElement.label] : accumulator[currentElement.label] = 1, accumulator
}, {});

for(item of newArray) {
  for(dataItem of item.data) {
    dataItem[Object.keys(dataItem)] = (dataItem[Object.keys(dataItem)] / labelOccurrences[item.label]).toFixed(2)
  }
}

Answer 5

Answer №3

Here is a different method that involves using hash grouping twice to generate an intermediate object and then forming a final object.

const data = [{"label":"morning","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"None":"0.00"},{"Netflix":"55.00"},{"Other":"20.00"}]},{"label":"morning","data":[{"Amazon Prime":"50.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"None":"0.00"},{"Netflix":"25.00"},{"Other":"0.00"}]},{"label":"morning","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"0.00"},{"None":"50.00"},{"Netflix":"50.00"},{"Other":"0.00"}]},{"label":"afternoon","data":[{"Amazon Prime":"10.00"},{"AppleTV":"11.00"},{"HBO Max":"0.00"},{"None":"50.00"},{"Netflix":"9.00"},{"Other":"20.00"}]},{"label":"afternoon","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"5.00"},{"None":"25.00"},{"Netflix":"20.00"},{"Other":"50.00"}]}]

const groups = data.reduce((acc, { label, data }) => {
  acc[label] ??= {};
  data.forEach((item) => {
    const [[channel, value]] = Object.entries(item);
    acc[label][channel] ??= [];
    acc[label][channel].push(Number(value));
  });
  return acc;
}, {});

// groups
//
// {"morning": {
//    "Amazon Prime": [0, 50, 0"],
//    "AppleTV": [0, 0, 0],
//    "HBO Max": [25, 25, 0],
//    "None": [0, 0, 50],
//    "Netflix": [55, 25,50],
//    "Other": [20, 0, 0]},
// ...}

const getFixedAvg = (data) => {
  const average = data.reduce((avg, e) => avg + e) / data.length;
  return (Math.floor(average * 100) / 100) // fix 16.67 to 16.66
    .toFixed(2); 
};

const makeData = (dataObj) => Object.entries(dataObj)
  .map(([channel, dataValues]) => ({ [channel]: getFixedAvg(dataValues) }));
  
const result = Object.entries(groups)
  .map(([label, dataObj]) => ({ label, data: makeData(dataObj) }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0 }

Answer 6

Here is a different method that involves using hash grouping twice to generate an intermediate object and then forming a final object.

const data = [{"label":"morning","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"None":"0.00"},{"Netflix":"55.00"},{"Other":"20.00"}]},{"label":"morning","data":[{"Amazon Prime":"50.00"},{"AppleTV":"0.00"},{"HBO Max":"25.00"},{"None":"0.00"},{"Netflix":"25.00"},{"Other":"0.00"}]},{"label":"morning","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"0.00"},{"None":"50.00"},{"Netflix":"50.00"},{"Other":"0.00"}]},{"label":"afternoon","data":[{"Amazon Prime":"10.00"},{"AppleTV":"11.00"},{"HBO Max":"0.00"},{"None":"50.00"},{"Netflix":"9.00"},{"Other":"20.00"}]},{"label":"afternoon","data":[{"Amazon Prime":"0.00"},{"AppleTV":"0.00"},{"HBO Max":"5.00"},{"None":"25.00"},{"Netflix":"20.00"},{"Other":"50.00"}]}]

const groups = data.reduce((acc, { label, data }) => {
  acc[label] ??= {};
  data.forEach((item) => {
    const [[channel, value]] = Object.entries(item);
    acc[label][channel] ??= [];
    acc[label][channel].push(Number(value));
  });
  return acc;
}, {});

// groups
//
// {"morning": {
//    "Amazon Prime": [0, 50, 0"],
//    "AppleTV": [0, 0, 0],
//    "HBO Max": [25, 25, 0],
//    "None": [0, 0, 50],
//    "Netflix": [55, 25,50],
//    "Other": [20, 0, 0]},
// ...}

const getFixedAvg = (data) => {
  const average = data.reduce((avg, e) => avg + e) / data.length;
  return (Math.floor(average * 100) / 100) // fix 16.67 to 16.66
    .toFixed(2); 
};

const makeData = (dataObj) => Object.entries(dataObj)
  .map(([channel, dataValues]) => ({ [channel]: getFixedAvg(dataValues) }));
  
const result = Object.entries(groups)
  .map(([label, dataObj]) => ({ label, data: makeData(dataObj) }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0 }

Merge arrays in map function based on label and aggregate information

Answer №1

Answer №2

Answer №3

Similar questions

Injecting a full browser-screen DIV into the body of the webpage

morris.js - displaying a dynamic line chart using JSON data

Pagination malfunction on AngularJS md-data-table is causing issues

What is the best way to enhance a state's capabilities in Machina.js?

Partially accessible Angular service within a callback function

Is it possible to make nested HTML list items align to the left?

Obtain the value or values of radio buttons based on certain conditions

Using Button Elements to Initiate Server Requests in Node.js

Steps for transforming a numerical value into an array with individual elements, such that the maximum value in the array will be 1

Invoke a functional component when a button is clicked in a React application

JSReports encountered an unexpected token "<" in the JSON at position 0

How to retrieve all the text inside an element using Protractor and Selenium

Attempting to access a variable from outside the function

What makes using $(selector).post() and $.get() in jQuery AJAX so valuable?

In Next.js, a peculiar issue arises when getServerSideProps receives a query stringified object that appears as "[Object object]"

When attempting to import an async function from a separate JavaScript file in NodeJS, it may not be properly

What is causing the error message 'Unexpected use of 'location' no-restricted-globals'?

What is the most effective way to configure a database for a project that will be utilized across multiple sub-domains, and what is the optimal

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Display an icon within an HTML element when the content inside it exceeds its boundaries