Generating ranges dynamically based on the values in an array

Question

Generating ranges dynamically based on the values in an array

As I receive data from a server, my goal is to categorize it into various buckets for presentation.

The dataset appears in the following format:

Array [
  Object {
    "name": "1.00",
    "value": 17,
  },
  Object {
    "name": "1.01",
    "value": 10,
  },
  Object {
    "name": "1.5",
    "value": 9,
  },
  Object {
    "name": "1.20",
    "value": 8,
  },
  Object {
    "name": "1.30",
    "value": 7,
  },
  Object {
    "name": "0.80",
    "value": 5,
  }
 ]

In this context, the name represents the "size" and the value signifies the number of occurrences within the system. For example, there are 5 records with size "0.80" and 8 records with size "1.20".

The objective is to sort the data as follows:

[
{key: 'Under .30', value: 11}, 
{key: '.30 to .39', value: 3}, 
{key: '.40 .49', value: 2}, 
...
...
{key: '.90 to .99', value: 1}, 
{key: '1.00 to 1.09', value: 3}, 
{key: '1.10 to 1.19', value: 2}, 
...
...
{key: '5.00 to 5.09', value: 5},
{key: '5.00 to 5.09', value: 1},
...
{key: 'Over 10', value: 3},
{key: 'Other', value 21}
]

Here, the key denotes the size, while the value represents the total occurrences for that specific grouping.

Essentially, I aim to:

Convert each row's name into a float value
Determine if a range exists for this value based on its name
If not, create the range and add the row's value to it
If the range already exists, increment its value using the row's value

I am currently considering pre-creating all the arrays statically from 0.30 to 10+ and then iterating through them with multiple if statements, which would be over 100 cases.

Any assistance or alternative approaches to tackling this issue would be immensely appreciated!

javascript arrays sorting

Answer 1

Answer №1

To start, I would initiate a function that generates an array of conditions.

Based on the example provided,

the initial decimal value is 0.30 and increments by 0.10 until it reaches 10 and goes beyond 10.0.

function createConditions(startValue, endValue, increment) {
  let conditions = [
    {
      key: `Under ${startValue}`,
      value: 0,
      condition: (val) => val < startValue,
    },
  ];

  for (let i = startValue; i < endValue - increment; i += increment) {
    conditions.push({
      key: `${i} to ${i + increment}`,
      value: 0,
      condition: (val) => val > i && val < i + increment,
    });
  }

  conditions.push({
    key: `Over ${endValue}`,
    value: 0,
    condition: (val) => val > endValue,
  });

  return conditions;
}

let conditionsArray = createConditions(0.3, 3.0, 0.1);

Following this, you can create your set of conditions using the above function

const testData = [
  { name: "1.00", value: 17 },
  { name: "1.01", value: 10 },
  { name: "1.5", value: 9 },
  { name: "1.20", value: 8 },
  { name: "1.30", value: 7 },
  { name: "0.80", value: 5 },
];

This creates an array with keys, values, and conditions alongside another dataset from the server.

Iterate over the server data and apply the conditions. (This step could be encapsulated in a function where you pass the conditions array and data for processing – how you use it is up to you)

testData.forEach((datum) => {
  let find = conditionsArray.find((checker) =>
    checker.condition(parseFloat(datum.name))
  );

  if (find) {
    find.value += datum.value;
  }
});

Next, log the conditionsArray to review the outcomes.

console.log(conditionsArray.filter((ch) => ch.value > 0));
// display only conditions with values greater than 0 :)

Upon execution, the console displays the following:

[
  {
    key: '0.7999999999999999 to 0.8999999999999999',
    value: 5,
    condition: [Function: condition]
  },
  {
    key: '0.9999999999999999 to 1.0999999999999999',
    value: 27,
    condition: [Function: condition]
  },
  {
    key: '1.4000000000000001 to 1.5000000000000002',
    value: 9,
    condition: [Function: condition]
  }
]

For dealing with floating-point numbers in programming, check out

Answer 2

To start, I would initiate a function that generates an array of conditions.

Based on the example provided,

the initial decimal value is 0.30 and increments by 0.10 until it reaches 10 and goes beyond 10.0.

function createConditions(startValue, endValue, increment) {
  let conditions = [
    {
      key: `Under ${startValue}`,
      value: 0,
      condition: (val) => val < startValue,
    },
  ];

  for (let i = startValue; i < endValue - increment; i += increment) {
    conditions.push({
      key: `${i} to ${i + increment}`,
      value: 0,
      condition: (val) => val > i && val < i + increment,
    });
  }

  conditions.push({
    key: `Over ${endValue}`,
    value: 0,
    condition: (val) => val > endValue,
  });

  return conditions;
}

let conditionsArray = createConditions(0.3, 3.0, 0.1);

Following this, you can create your set of conditions using the above function

const testData = [
  { name: "1.00", value: 17 },
  { name: "1.01", value: 10 },
  { name: "1.5", value: 9 },
  { name: "1.20", value: 8 },
  { name: "1.30", value: 7 },
  { name: "0.80", value: 5 },
];

This creates an array with keys, values, and conditions alongside another dataset from the server.

Iterate over the server data and apply the conditions. (This step could be encapsulated in a function where you pass the conditions array and data for processing – how you use it is up to you)

testData.forEach((datum) => {
  let find = conditionsArray.find((checker) =>
    checker.condition(parseFloat(datum.name))
  );

  if (find) {
    find.value += datum.value;
  }
});

Next, log the conditionsArray to review the outcomes.

console.log(conditionsArray.filter((ch) => ch.value > 0));
// display only conditions with values greater than 0 :)

Upon execution, the console displays the following:

[
  {
    key: '0.7999999999999999 to 0.8999999999999999',
    value: 5,
    condition: [Function: condition]
  },
  {
    key: '0.9999999999999999 to 1.0999999999999999',
    value: 27,
    condition: [Function: condition]
  },
  {
    key: '1.4000000000000001 to 1.5000000000000002',
    value: 9,
    condition: [Function: condition]
  }
]

For dealing with floating-point numbers in programming, check out

Generating ranges dynamically based on the values in an array

Answer №1

Similar questions

Show a button using CSS when the cursor is hovering

Guide to setting up a nested vuetify navigation drawer

The function getComputedStyle('background-color') will return a transparent value that does not inherit from any ancestor element

Using Jquery to toggle visibility and position of a button when clicked

Learn the process of showcasing database content on a webpage with an interactive feature that enables users to choose and access additional details

Learning how to access my CSS file using Express and Node.js

When using jQuery to parse JSON, I am unable to make changes to an array

The system encountered an error stating that there is no defined method for 'id' within the ActiveRecord Associations CollectionProxy of the Page object

Obtaining a subset of data from firebase

Rendering a dynamic 3D model with animated sequences in Three.js through CreateFromMorphTargetSequence

Error Occurred: Angular View Not Loading

The Vue user object appears to be null in spite of being defined and clearly visible in the log output

Output the value of each key from an array only if the corresponding key in a second array

Can an input element be used to showcase a chosen image on the screen?

Creating a Circle with Pixi.js v4 and Typerscript in IONIC 2

Issue with data entry: unable to enter the letter 'S' in search field

Removing an item from an array containing several objects

Mongoose encountered a RangeError due to exceeding the maximum call stack size

CSS ID selectors are not functioning properly

Vue.js and axios causing an empty array after the page is refreshed