Obtain the range of values for a match from an array using Vue.js

I have an array in my Vue.js code with values 25, 100, 250, and 500. I am looking to find the key value that matches a specific range. For example, if the input is 5, then the output should be 25. However, the code I tried returns all values within the range.

let input = 5
let myarray = [25, 100, 250 ,500]
this.myarray.forEach((val, q) => {
  if(val >= input) {
    //console.log('Do something here')
  } 
});

Edit:

For instance, if the input is 5 which falls between 0-25, the desired output should be 25. Similarly, if the input is 30 falling between 25-100, the expected output would be 100 from the array.

Answer №1

To locate the position of the first element that exceeds the input value, you can utilize the findIndex() method on a sorted array.

let input = 6
let numArray = [20, 80, 150 ,300]
let pos = numArray.findIndex(element => {
  return element > input;
});
if(pos <= -1) {
    pos = numArray.length - 1;
}

console.log(numArray[pos]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function insertAdjacentHTML does not seem to be functioning properly when used with a

I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

Can we create a popup alert that says "Error Contacting Server" when the http request does not receive any response? .controller('items_ctrl',['$scope','$http',function($scope,$http){ $scope.shop_id=localStorage.getItem(" ...

Using Javascript within a PHP file to generate JSON output

Can you integrate Javascript code within a PHP file that utilizes header('Content-Type: application/json'); to produce output in JSON format? UPDATE: I'm attempting to modify the color of a CSS class when $est = 'Crest', but the J ...

Navigating Assets within NodeJS Module

I'm facing a challenge with my NodeJS module that is designed to translate XML to HTML using an XSL file. The issue arises when I try to package the XSL file along with the rest of the module. Currently, the XSL file is located inside the source fold ...

Modify the file format depending on the browser being used as Internet Explorer

Currently seeking the most effective method to dynamically alter the file extension of certain images (from .svg to .png) specifically for Internet Explorer users. Uncertain about the optimal approach: consider parsing the HTML code with PHP utilize jQu ...

Buttoned Up: The Troubling Tale of jQuery and

Seems like this question might be a duplicate, but I'm not bothered. Despite searching on Google, I haven't found a solution. What could be the mistake here? $(document).ready(function() { $("#foo").click(function() { $.ajax({ type ...

Leveraging Scrapy/Selenium for populating fields and conducting searches on LinkedIn's advanced search page

Discover the URL for LinkedIn's advanced search feature: In my attempt to complete fields and submit a form on the LinkedIn advanced search page using Selenium with Python, I encountered a challenge. Whenever I try typing in information for fields l ...

What could be the reason for my function failing to return true?

I have a function that can check if a script is loaded: function checkURLExistence(url){ $.ajax({ url: url, success: function(data){ //alert(url + ' exists'); console.log(url + ' exists'); return ...

Having trouble with Vue component not showing updated data after axios POST request issue

Hi there, I'm facing an issue and could really use some guidance from a skilled Javascript Wizard. Here's the problem: I have a Laravel collection that I'm passing to a Vue component. Within the component, I am looping through the collecti ...

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

Ways to keep the position of an expanded collapsible table from Material UI intact

I found a collapsible table code snippet on this website: https://mui.com/material-ui/react-table/#collapsible-table However, there seems to be an issue where when I expand a row, the table "grows up" as it increases in size. This behavior is not ideal. I ...

I am unable to input just one numerical value into my function

I am encountering an issue with my function that calls another function. The problem arises when inputting single numbers in the prompt; I have to append a letter like (a1, a2, a3) for it to function correctly. The function "PrintSelectedToPDF" works smoo ...

Is it possible for me to utilize window.top within the .js file?

Within my GWT code, I am transferring a variable to a JSP file. The process looks like this: <html> <head> <script type="text/javascript"> alert("Inside the JSP file"); var criticalPath = window.top.criticalPath; ...

Creating a JavaScript alert in Selenium Java WebDriver with a concise message

While running a Selenium Java program, I am attempting to create a JavaScript alert window with a specific string message. I came across a method that involves executing JavaScript within Selenium by interacting with hidden elements: WebDriver driver; Java ...

Loop through the v-for based on the input number that was selected

I'm looking to accomplish the following: if a user selects input X (a number between 1 and 10), I want to render a specific vue component X times. It seems to work if I use v-for n in 10, but not when I use variables. <template> <div> ...

Is it possible to incorporate a variable into an object?

If you are wondering whether it is possible to utilize a variable in the following scenario, the reason for my inquiry is connected to the potential of utilizing an input element to dynamically modify the variable: var str = "pineapples" var cost = { pine ...

Ways to retrieve an individual item using Puppeteer

Can Puppeteer retrieve a single element instead of an array? Often, we see code like this: const elements = await page.$$('.some-class'); Is there a way to get just one element without returning an array? ...

PHP is returning an empty response during an AJAX request

I am facing an issue with my AJAX request where I am trying to return a simple echo, but for some reason, it's not working this time. Even after stripping down the code to its bare essentials, the response is still blank. Javascript function getUs ...

Deciphering Google location data using JavaScript

It appears that this code is not functioning properly for unknown reasons let url = "https://maps.googleapis.com/maps/api/place/search/json?"; url += "location="+lat+","+lng+"&"; url += "radius=500&"; url += "types=&"; url += "name=&"; url ...

The installation of webtorrent-hybrid failed due to the error message "node-pre-gyp: command not found"

I'm currently encountering an issue while attempting to install webtorrent-hybrid for developing an electron p2p application. Vue UI is the framework I am using to handle front-end development, and I have successfully created a new project utilizing v ...