Whenever I attempt to trim my integer within a for loop, my browser consistently becomes unresponsive and freezes

Question

Whenever I attempt to trim my integer within a for loop, my browser consistently becomes unresponsive and freezes

I am facing an issue with my code that generates alcohol percentage, resulting in values like 43.000004 which I need to trim down to 43.0, 45.3, etc. However, whenever I try to use any trim/parse functions in JavaScript, my browser ends up freezing.

Below is the code snippet:

incrementAlcohol() {
  // Initialize an empty array.
  let alcoholData = []

  // Iterate through the array from 40 to 95 with increments of 0.1.
  for (let i = 40; i <= 95; i + 0.1) {
    // Trim the decimal places to 3 digits.
    parseFloat(i).toFixed(3)

    // Convert it into a string for the autocomplete component.
    i.toString()

    // Add it to the array.
    alcoholData.push({
      'id': i,
      'name': i + "%"
    })
  }

  // Return the processed alcohol data.
  return alcoholData
},

javascript arrays vue.js parsing trim

Answer 1

Answer №1

A potential solution is to develop a generator function that produces the current value and then enclose it in an array.

Furthermore, it's worth noting that the range ought to be inclusive/exclusive (max = end - step).

const generateRangeValues = function*(start, end, step, customFunction) {
  for (let val = start; val < end; val += step) {
    yield customFunction ? customFunction(val) : val;
  }
}

let alcoholData = [...generateRangeValues(40, 95, 0.1, (val) => {
  return ((fixed) => ({ id : fixed, name : fixed + "%" }))(val.toFixed(3));
})]

console.log(alcoholData);

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

Answer 2

A potential solution is to develop a generator function that produces the current value and then enclose it in an array.

Furthermore, it's worth noting that the range ought to be inclusive/exclusive (max = end - step).

const generateRangeValues = function*(start, end, step, customFunction) {
  for (let val = start; val < end; val += step) {
    yield customFunction ? customFunction(val) : val;
  }
}

let alcoholData = [...generateRangeValues(40, 95, 0.1, (val) => {
  return ((fixed) => ({ id : fixed, name : fixed + "%" }))(val.toFixed(3));
})]

console.log(alcoholData);

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

Whenever I attempt to trim my integer within a for loop, my browser consistently becomes unresponsive and freezes

Answer №1

Similar questions

Having trouble getting the items to show up on the canvas

Configuration file stored within the node_modules directory

Utilizing highlight.js for seamless integration with vue2-editor (Quill)

Using Leaflet to set the view based on a GeoJSON dataset

How to implement form modal binding using Laravel and Vue.js

Retrieve the Checkbox id of a material-ui checkbox by accessing the object

Creating a synchronous loop in Node.js with Javascript

Ignoring the incremented value in a jQuery function

Exploring the contrasting outcomes between a request post and an axios post

Is there a Node Package available for storing data indefinitely?

initiate a click event within another click event

Exploring the synergies between Angular Dragula and utilizing the $index property

Using AJAX POST requests with PHP and SQL queries seems to function properly but unfortunately, it only

Use the `string.replace()` method to swap out strings in a nested object with values from a separate file

Ways to implement material-ui button design on an HTML-native button

Intersection Observer API is not compatible with the functionality of the navigation bar

The AngularJS price slider may exceed its range if the ng-model is null or below the minimum value

vue popup input will automatically receive focus

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

Refreshing a page will disable dark mode