Dynamically create ranges based off values in array

Question

I have data being returned from a server that I need to sort into buckets for display.

The data looks like this

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,
  }
 ]

For this example, the name is the "size" and the value is number of occurrences in the system. IE: (5 records of size "0.80", 8 records of size "1.20")

The end goal is to have the data sorted like so:

[
{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}
]

Where the key is the size, and the value is the number of total occurrences for that grouping.

Basically I want to do the following:

For each row, parse the name into a float
Determine if there is a range already created for this value based off its name.
If not, create the range, increment the value by the row value
If range is already created, increment the value by the row value

I can only really think about statically creating all the arrays ahead of time (0.30 all the way to 10+) which is over 100, and then just looping with if statements again, over 100.

Would be greatly appreciated if anyone can help with this problem, or give me a better idea of how I can tackle this problem!

halilcakar · Accepted Answer · 2021-08-09 23:00:51Z

Well first I would start a function that creates these conditions array.

As I can see from the example you have given

it has a start decimal which is 0.30 and add's 0.10 until 10 and over 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);

After this you can create your conditions array with this 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 },
];

From here you have an array that have your keys values and conditions and another array from server.

Loop through the server data and check the conditions. (This part maybe can be in a function where you send your conditions array and data to a function and get the result this part up to you how ever you wanna use :)

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

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

after this you should log the conditionsArray and see the results.

console.log(conditionsArray.filter((ch) => ch.value > 0));
// to show only conditions that have more then 0 :)

At the end the console gives me this

[
  {
    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 floats in programming please see https://0.30000000000000004.com/

Collectives™ on Stack Overflow

Dynamically create ranges based off values in array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related