Utilize JavaScript to filter an array and extract a subset based on two specified range parameters

Question

Utilize JavaScript to filter an array and extract a subset based on two specified range parameters

How can I extract a subset from an array that overlaps with two specified ranges?

Let's say we have an array filled with objects:

const list = [{
    id: 1,
    price: "10",
    weight: "19.45"
  },{
    id: 2,
    price: "14",
    weight: "27.8"
  },{
    id: 3,
    price: "45",
    weight: "65.7"
  },{
    id: 4,
    price: "37",
    weight: "120.5"
  },{
    id: 5,
    price: "65",
    weight: "26.9"
  },{
    id: 6,
    price: "120",
    weight: "19.3"
  },{
    id: 7,
    price: "20",
    weight: "45.7"
  }]

We want to filter this array based on specific ranges defined for two parameters price and weight.

let range = {
    startPrice: 15,
    endPrice: 60,
    startWeight: 22.0,
    endWeight: 70.5,
  }

The goal is to get a new array with objects that fall within both of these specified ranges. The expected result should be:

filtered = [{
    id: 3,
    price: "45",
    weight: "65.7"
  },{
    id: 7,
    price: "20",
    weight: "45.7"
  }]

Objects with id: 3 and id: 5 meet the criteria for both ranges. How should the list.filter() function be implemented in this case? Any assistance would be highly appreciated. Thank you.

javascript arrays filter range subset

Answer 1

Answer №1

Note: I have utilized the parseFloat function to convert values from a String format to a numeric format. There are alternative methods available to achieve the same conversion from a String to a Number.

var list = [{"id":1,"price":"10","weight":"19.45"},{"id":2,"price":"14","weight":"27.8"},{"id":3,"price":"45","weight":"65.7"},{"id":4,"price":"37","weight":"120.5"},{"id":5,"price":"65","weight":"26.9"},{"id":6,"price":"120","weight":"19.3"},{"id":7,"price":"20","weight":"45.7"}];
var range = {
  startPrice: 15,
  endPrice: 60,
  startWeight: 22.0,
  endWeight: 70.5
};

var filtered=list.filter(
  element=> {
    var elementprice=parseFloat(element.price);
    var elementweight=parseFloat(element.weight);
    if(
      elementprice>=range.startPrice &&
      elementprice<=range.endPrice &&
      elementweight>=range.startWeight &&
      elementweight<=range.endWeight
    ) {
      return true;
    }
    return false;
  }
);
console.log(filtered);

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

Answer 2

Note: I have utilized the parseFloat function to convert values from a String format to a numeric format. There are alternative methods available to achieve the same conversion from a String to a Number.

var list = [{"id":1,"price":"10","weight":"19.45"},{"id":2,"price":"14","weight":"27.8"},{"id":3,"price":"45","weight":"65.7"},{"id":4,"price":"37","weight":"120.5"},{"id":5,"price":"65","weight":"26.9"},{"id":6,"price":"120","weight":"19.3"},{"id":7,"price":"20","weight":"45.7"}];
var range = {
  startPrice: 15,
  endPrice: 60,
  startWeight: 22.0,
  endWeight: 70.5
};

var filtered=list.filter(
  element=> {
    var elementprice=parseFloat(element.price);
    var elementweight=parseFloat(element.weight);
    if(
      elementprice>=range.startPrice &&
      elementprice<=range.endPrice &&
      elementweight>=range.startWeight &&
      elementweight<=range.endWeight
    ) {
      return true;
    }
    return false;
  }
);
console.log(filtered);

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

Answer 3

Answer №2

Saying you mean 3 and 7

Furthermore, it is necessary to eliminate the quotes or convert to a number. Keep in mind that a filter requires a true or false for a Boolean test, without the need for an if statement.

const list = [{ id: 1, price: "10", weight: "19.45" }, { id: 2, price: "14", weight: "27.8" }, { id: 3, price: "45", weight: "65.7" }, { id: 4, price: "37", weight: "120.5" }, { id: 5, price: "65", weight: "26.9" }, { id: 6, price: "120", weight: "19.3" }, { id: 7, price: "20", weight: "45.7" }];
 let range = { startPrice: 15, endPrice: 60, startWeight: 22.0, endWeight: 70.5, }

const res = list.filter(item => 
  +item.price >= range.startPrice && 
  +item.price <= range.endPrice &&
  +item.weight >= range.startWeight &&  
  +item.weight <= range.endWeight);
console.log(res);

Answer 4

Saying you mean 3 and 7

Furthermore, it is necessary to eliminate the quotes or convert to a number. Keep in mind that a filter requires a true or false for a Boolean test, without the need for an if statement.

const list = [{ id: 1, price: "10", weight: "19.45" }, { id: 2, price: "14", weight: "27.8" }, { id: 3, price: "45", weight: "65.7" }, { id: 4, price: "37", weight: "120.5" }, { id: 5, price: "65", weight: "26.9" }, { id: 6, price: "120", weight: "19.3" }, { id: 7, price: "20", weight: "45.7" }];
 let range = { startPrice: 15, endPrice: 60, startWeight: 22.0, endWeight: 70.5, }

const res = list.filter(item => 
  +item.price >= range.startPrice && 
  +item.price <= range.endPrice &&
  +item.weight >= range.startWeight &&  
  +item.weight <= range.endWeight);
console.log(res);

Utilize JavaScript to filter an array and extract a subset based on two specified range parameters

Answer №1

Answer №2

Similar questions

Exploring the source of the "Unexpected token ;" issue in an Express-JS application

Tips for triggering a child component function during parent events:

Horizontal navigation bar encroaching on slideshow graphics

What makes this CSS causing render blocking?

Determine the date 7 days before today using JavaScript

Employ the find() function to ascertain the result of a condition

Update the react component's state props to trigger a re-render when the state changes

How can Vue JS be used to assign numbers to specific elements in an array that meet certain conditions?

Passing a JavaScript variable through a URL link

Removing Firefox's button outline when the mouse is pressed, not clicked, hovered over, or focused

The Next.js application is functioning smoothly in development, but encounters errors during the building and deployment processes

What is the best way to implement conditional hook usage in React?

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

An undefined value error occurred while attempting to save data to a MongoDB collection through a node/express server

PHP script only inserting the first element of an array into the MySQL database table

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

Exploring characteristics using DocumentTraversal

Firmidable with Node.js

Link the asp control as you input text into the Text box

Combining elements of an array using the merge() function within a while() loop and then extracting those values in array format using $row['field_name']