Calculate how many items within a range

i'm trying to get some data together based on some data.

So for example as seen below the items array displays the total amount of times a number is between the range in the data, so for example 4500 - 5000 has got 4 numbers between that range.

However adding these up doesn't give an accurate representation of the amount of items there is. If this makes sense? As in the result the count for 7000 is 13, however this should be 8.

const data = [ 2200, 3900, 4500, 4500, 4800, 5000, 6000, 6000 ]

const items = [
    { value: { from: 2000, to: 2500 }, count: null },
    { value: { from: 2500, to: 3000 }, count: null },
    { value: { from: 3000, to: 3500 }, count: null },
    { value: { from: 3500, to: 4000 }, count: null },
    { value: { from: 4000, to: 4500 }, count: null },
    { value: { from: 4500, to: 5000 }, count: null },
    { value: { from: 5000, to: 5500 }, count: null },
    { value: { from: 5500, to: 6000 }, count: null },
    { value: { from: 6000, to: 6500 }, count: null },
    { value: { from: 6500, to: 7000 }, count: null },
].map(item => {
    item.count = data.filter(x => x <= item.value.to && x >= item.value.from).length;
    return item;
});

let counter = 0;
result = items.map(i => {
    counter += i.count;
    return { value: i.value.to, label: i.value.to, count: counter }
}).filter(Boolean);

console.log({items, result});

What I SHOULD have is the following, as this data is for an UPTO dropdown.

[
    { value: { from: 2000, to: 2500 }, count: 1 },
    { value: { from: 2500, to: 3000 }, count: 1 },
    { value: { from: 3000, to: 3500 }, count: 1 },
    { value: { from: 3500, to: 4000 }, count: 2 },
    { value: { from: 4000, to: 4500 }, count: 4 },
    { value: { from: 4500, to: 5000 }, count: 6 },
    { value: { from: 5000, to: 5500 }, count: 6 },
    { value: { from: 5500, to: 6000 }, count: 8 },
    { value: { from: 6000, to: 6500 }, count: 8 },
    { value: { from: 6500, to: 7000 }, count: 8 },
]

Solution 1:

You should not consider both from and to inside the boundary. This will result in having common elements in individual groups.

For example: From 4000 to 4500 means numbers greater than 4000 and less than or equal to 4500.

Here in the above example, the lover boundary donot overlaps, so that the individual groups donot have common elements.

const data = [2200, 3900, 4500, 4500, 4800, 5000, 6000, 6000]

const items = [
  { value: { from: 2000, to: 2500 }, count: null },
  { value: { from: 2500, to: 3000 }, count: null },
  { value: { from: 3000, to: 3500 }, count: null },
  { value: { from: 3500, to: 4000 }, count: null },
  { value: { from: 4000, to: 4500 }, count: null },
  { value: { from: 4500, to: 5000 }, count: null },
  { value: { from: 5000, to: 5500 }, count: null },
  { value: { from: 5500, to: 6000 }, count: null },
  { value: { from: 6000, to: 6500 }, count: null },
  { value: { from: 6500, to: 7000 }, count: null },
].map(item => {
  item.count = data.filter(x => x <= item.value.to && x > item.value.from).length;
  return item;
});
let counter = 0;
result = items.map(i => {
  counter += i.count;
  return { value: i.value.to, label: i.value.to, count: counter }
}).filter(Boolean);

console.log({ items, result });

Solution 2:

You could take a single loop and map a new object with count.

const
    data = [2200, 3900, 4500, 4500, 4800, 5000, 6000, 6000],
    values = [{ value: { from: 2000, to: 2500 }, count: null }, { value: { from: 2500, to: 3000 }, count: null }, { value: { from: 3000, to: 3500 }, count: null }, { value: { from: 3500, to: 4000 }, count: null }, { value: { from: 4000, to: 4500 }, count: null }, { value: { from: 4500, to: 5000 }, count: null }, { value: { from: 5000, to: 5500 }, count: null }, { value: { from: 5500, to: 6000 }, count: null }, { value: { from: 6000, to: 6500 }, count: null }, { value: { from: 6500, to: 7000 }, count: null }],
    items = values.map(item => ({
        ...item,
        count: data.reduce((s, x) => s + (x <= item.value.to), 0)
    }));

console.log(items);

.as-console-wrapper { max-height: 100% !important; top: 0; }