Javascript get steps index based on array lenth-CodePudding

I have an array of items for which I want to create steps based on their index and the length of the array.

The minimum value should be 0 and the maximum 100.

I don't know if I'm explaining it right, but for example. I have this array:

const RAMmarks = [
    {
      value: 0,
      label: ">1024 MB",
    },
    {
      value: 25,
      label: ">2048 MB",
    },
    {
      value: 50,
      label: ">4096 MB",
    },

    {
      value: 75,
      label: ">6144 MB",
    },

    {
      value: 100,
      label: ">8192 MB",
    },
  ];

...but then the other one has less items:

const diskMarks = [
    {
      value: 0,
      label: ">20 GB",
    },
    {
      value: 33,
      label: ">45 GB",
    },
    {
      value: 66,
      label: ">75 GB",
    },

    {
      value: 99,
      label: ">100 GB",
    },
  ];

How do I get the values dynamically based on how many steps the array has?

CodePudding user response：

You can use the following function to add the values to your items:

function addMarks(items) {
    let steps = items.length - 1;
    let step = 100 / steps;
    for(let i in items) {
        items[i].value = Math.round(i * step);
    }
    return items;
}

Based on the example you provided, you might want to swap Math.round for Math.floor

CodePudding user response：

I would do like this. Had to add the floor to make it work for your second example.

const RAMmarks = [
  {
    value: 0,
    label: ">1024 MB",
  },
  {
    value: 25,
    label: ">2048 MB",
  },
  {
    value: 50,
    label: ">4096 MB",
  },

  {
    value: 75,
    label: ">6144 MB",
  },

  {
    value: 100,
    label: ">8192 MB",
  },
];

const diskMarks = [
  {
    value: 0,
    label: ">20 GB",
  },
  {
    value: 33,
    label: ">45 GB",
  },
  {
    value: 66,
    label: ">75 GB",
  },

  {
    value: 99,
    label: ">100 GB",
  },
];

Array.prototype.addStep = function () {
  return this.map((mark, index) => {
    return {
      label: mark.label,
      value: index * Math.floor(100 / (this.length - 1)),
    };
  });
};

const RAMmarksStep = RAMmarks.addStep();
const diskMarksStep = diskMarks.addStep();

console.log(RAMmarksStep);
console.log(diskMarksStep);

CodePudding user response：

You can do this easily with Array.from() and a map function. Due to how arrays are stored, {length: steps} acts as an array-like object with steps empty elements, then the map function transforms each empty element into its value. Try using this code:

function stepArray(min, max, steps) {
  return Array.from({length: steps}, (_, i) => ((max-min)/(steps-1))*i   min);
}

console.log(stepArray(0, 100, 5));

The idea is to get the difference between max and min, divide that difference into step-1 steps (because we need to include both of the endpoints), multiply that step by the current step i, then add back the min that was subtracted in the beginning.

Note that if you are using uneven intervals, you might want to use Math.floor() to get nicer numbers. Expand the snippet below to see an example:

function stepArray(min, max, steps) {
  return Array.from({length: steps}, (_, i) => Math.floor(((max-min)/(steps-1))*i   min));
}

// without Math.floor(), these would all be repeating decimals
console.log(stepArray(0, 100, 10));

Once you have this basic array of values, you can then easily transform it into your more complex array of marks.