## DEV Community

Johannes Konings

Posted on • Originally published at johanneskonings.dev

# ⚠ Disclaimer

This is a quick example how to calculate the average of different items from different arrays. If there are better solutions, please let me know.

# Overview

The data basis are three fruit baskets with different kinds of fruits an the number ot items in the basket. With a React webpage the several baskets can be choosed and the average of the items will be calculated.

``````const fruitBaskets = [
{
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 3 },
{ fruitName: "Strawberry", count: 9 },
{ fruitName: "Lemon", count: 7 }
]
},
{
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 8 },
{ fruitName: "Lemon", count: 3 }
]
},
{
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 3 },
{ fruitName: "Orange", count: 3 },
{ fruitName: "Lemon", count: 9 },
{ fruitName: "Strawberry", count: 5 }
]
}
];
``````

# Implementation

The implementation looks as follows:

## The webpage - App.js

The `App.js` contains the selection of the fruit baskets via a dropdown and a table for the results. The coding is here.

## The calculation - data.js

The `data.js` contains the data of the fruit baskets and the calculation input data. The coding is here.

The calculation has three steps and is described with the baskets 1 and 2 and is in this format.

``````  [
[
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 3 },
{ fruitName: "Strawberry", count: 9 },
{ fruitName: "Lemon", count: 7 }
],
[
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 8 },
{ fruitName: "Lemon", count: 3 }
]
]
``````

### merge

Basket 1 and 2 are selected. This two arrays will be merged with this coding.

``````  selectedFruitBaskets.forEach(selectedFruitBasket => {
);
});

``````

After

``````  [
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 3 },
{ fruitName: "Strawberry", count: 9 },
{ fruitName: "Lemon", count: 7 },
{ fruitName: "Apple", count: 5 },
{ fruitName: "Banana", count: 8 },
{ fruitName: "Lemon", count: 3 }
]
``````

### sum

At this step the number of fruits of each kind will be summed

``````  const basketSum = mergedBasket.reduce((acc, curr) => {
if (!acc[curr.fruitName]) {
acc[curr.fruitName] = { ...curr, countInBaskets: 1, sum: curr.count };
return acc;
}
acc[curr.fruitName].sum += curr.count;

return acc;
}, {});
``````

After

``````{
"Apple": {
"count": 5,
"fruitName": "Apple",
"sum": 10
},
"Banana": {
"count": 3,
"fruitName": "Banana",
"sum": 11
},
"Lemon": {
"count": 7,
"fruitName": "Lemon",
"sum": 10
},
"Strawberry": {
"count": 9,
"fruitName": "Strawberry",
"sum": 9
}
}
``````

### average

After the summation the average can be calulated.

``````  const basketAverage = Object.keys(basketSum).map(fruitName => {
return {
fruitName: item.fruitName,
sum: item.sum
};
});
``````

After

``````[
{
"averageCountOverall": 5,
"averageCountWithMinOne": 5,
"fruitName": "Apple",
"sum": 10
},
{
"averageCountOverall": 5.5,
"averageCountWithMinOne": 5.5,
"fruitName": "Banana",
"sum": 11
},
{
"averageCountOverall": 4.5,
"averageCountWithMinOne": 9,
"fruitName": "Strawberry",
"sum": 9
},
{
"averageCountOverall": 5,
"averageCountWithMinOne": 5,
"fruitName": "Lemon",
"sum": 10
}
]
``````

# Coding

See the Coding on GitHub or StackBlitz: