loading...

Quick example to get the average of items from different arrays

johanneskonings profile image Johannes Konings Originally published at johanneskonings.dev ・2 min read

⚠ 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 = [
  {
    name: "fruitBasket1",
    fruitBasket: [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 3 },
      { fruitName: "Strawberry", count: 9 },
      { fruitName: "Lemon", count: 7 }
    ]
  },
  {
    name: "fruitBasket2",
    fruitBasket: [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 8 },
      { fruitName: "Lemon", count: 3 }
    ]
  },
  {
    name: "fruitBasket3",
    fruitBasket: [
      { fruitName: "Apple", count: 5 },
      { fruitName: "Banana", count: 3 },
      { fruitName: "Orange", count: 3 },
      { fruitName: "Lemon", count: 9 },
      { fruitName: "Strawberry", count: 5 }
    ]
  }
];
Enter fullscreen mode Exit fullscreen mode

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.

app.js

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 }
    ]
  ]
Enter fullscreen mode Exit fullscreen mode

merge

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

  selectedFruitBaskets.forEach(selectedFruitBasket => {
    const found = fruitBaskets.find(
      fruitBasket => fruitBasket.name === selectedFruitBasket.name
    );
    fruits.push(found.fruitBasket);
  });

  const basketCounts = fruits.length;

  const mergedBasket = [].concat(...fruits);
Enter fullscreen mode Exit fullscreen mode

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 }
  ]
Enter fullscreen mode Exit fullscreen mode

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].countInBaskets += 1;
    acc[curr.fruitName].sum += curr.count;

    return acc;
  }, {});
Enter fullscreen mode Exit fullscreen mode

After

{
    "Apple": {
        "count": 5,
        "countInBaskets": 2,
        "fruitName": "Apple",
        "sum": 10
    },
    "Banana": {
        "count": 3,
        "countInBaskets": 2,
        "fruitName": "Banana",
        "sum": 11
    },
    "Lemon": {
        "count": 7,
        "countInBaskets": 2,
        "fruitName": "Lemon",
        "sum": 10
    },
    "Strawberry": {
        "count": 9,
        "countInBaskets": 1,
        "fruitName": "Strawberry",
        "sum": 9
    }
}
Enter fullscreen mode Exit fullscreen mode

average

After the summation the average can be calulated.

  const basketAverage = Object.keys(basketSum).map(fruitName => {
    const item = basketSum[fruitName];
    return {
      fruitName: item.fruitName,
      averageCountOverall: item.sum / basketCounts,
      averageCountWithMinOne: item.sum / item.countInBaskets,
      sum: item.sum
    };
  });
  return basketAverage;
Enter fullscreen mode Exit fullscreen mode

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
    }
]
Enter fullscreen mode Exit fullscreen mode

Result

result

Coding

See the Coding on GitHub or StackBlitz:

Discussion

pic
Editor guide