DEV Community

Johannes Konings
Johannes Konings

Posted on • Originally published at johanneskonings.dev

1

Quick example to get the average of items from different arrays

⚠ 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:






Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up