Extracting a specific range of values from a JSON object

Can anyone help me with filtering a range of values from a json object?

Here is the range data I am working with:

const contractAmountRange = [
    { id: '1', min: 0, max: 100000, description: 'Less than $100,000' },
    {
        id: '2',
        min: 100001,
        max: 500000,
        description: '$100,001 to $500,000',
    },
    {
        id: '3',
        min: 500000,
        max: 1000000,
        description: '$500,000 to $1,000,000',
    },
    {
        id: '4',
        min: 1000001,
        max: 5000000,
        description: '$1,000,001 to $5,000,000',
    },
    {
        id: '5',
        min: 5000000,
        description: 'More than $5,000,000',
    },
];

I am trying to filter the json object based on the chosen range from the above data.

const data = [
    {
        tenderNo: 'ASHQ17HH26334',
        awardedAmt: 400000,
        yearAwarded: 2015,
    },
    {
        tenderNo: 'BFG8765TT14000008',
        awardedAmt: 300000,
        yearAwarded: 2015,
    },
    {
        tenderNo: 'AFSH00ETT14000009',
        awardedAmt: 76071.21,
        yearAwarded: 2015,
    },
];

This is my current progress:

data represents the json object

contractAmountRange contains the available ranges

rangeSelected is the id of the chosen range

const filterData = (data, contractAmountRange, rangeSelected) => {
    // let maxRange, minRange;
    const rangeMap = {};

    for (const item of contractAmountRange) {
        rangeMap[item.id] = item;
    }

     const filteredData = data.filter((el) => {
            return (
                ?????
            );
javascriptfilter

Answer №1

Initially locate the specified range, then sort out the elements with values of awardedAmt falling within the determined min and max:

const contractAmountRange = [{
    id: "1",
    min: 0,
    max: 100000,
    description: "Less than $100,000"
  },
  {
    id: "2",
    min: 100001,
    max: 500000,
    description: "$100,001 to $500,000",
  },
  {
    id: "3",
    min: 500000,
    max: 1000000,
    description: "$500,000 to $1,000,000",
  },
  {
    id: "4",
    min: 1000001,
    max: 5000000,
    description: "$1,000,001 to $5,000,000",
  },
  {
    id: "5",
    min: 5000000,
    description: "More than $5,000,000",
  },
];

const data = [{
    tenderNo: "ASHQ17HH26334",
    awardedAmt: 400000,
    yearAwarded: 2015,
  },
  {
    tenderNo: "BFG8765TT14000008",
    awardedAmt: 300000,
    yearAwarded: 2015,
  },
  {
    tenderNo: "AFSH00ETT14000009",
    awardedAmt: 76071.21,
    yearAwarded: 2015,
  },
];

const filterData = (data, contractAmountRange, selectedRange) => {
  const foundRange = contractAmountRange.find((x) => x.id === selectedRange);
  if (!foundRange) {
    throw new Error("Range not found!");
  }
  const {
    min,
    max
  } = foundRange;
  return data.filter(
    ({
      awardedAmt
    }) => awardedAmt >= min && awardedAmt <= max
  );
};

const output = filterData(data, contractAmountRange, "2");
console.log(output);

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

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

javascripthtmlapache-flex

jquery technique for toggling a single button

My goal is to use jQuery to toggle a button rather than the typical paragraph toggling. I want the button to appear and disappear when clicked, while also increasing the "score" upon each click and decreasing it when the button reappears. Can anyone guide ...

javascriptjqueryhtmlcss

Is it possible to delay Vue rules from validating until a user interacts with an element?

For a project I am working on, I have implemented a v-date-picker where users can select a departure date and a return date. Interestingly, while most of the input field validations only occur after user interaction, the departure date picker displays an e ...

javascriptvue.jsvuetify.js

Executing the callback function passed as a prop

I'm a bit confused about how to call a callback function in an element's prop. Let's say I have a button here: <Button onPress={() => { loadMore()}} title="Load More" backgroundColor='#0A55C4' /> I am wondering wh ...

javascriptreact-native

JQuery is having trouble locating a variable in a different JavaScript file

Currently, I am utilizing the cakephp framework and have developed 2 distinct javascript files which I have stored in my webroot/js directory. The first javascript file includes modal dialog variables that define the settings for the dialog boxes. The seco ...

javascriptjqueryvariablesundefined

Create a variable to store the sum value when iterating through a range using jQuery's

Currently, I am in the process of developing a specialized calculator that requires me to calculate the sum of variables within my jQuery.each loop for a specific range from 0 to 4 (equivalent to 5 years). While I have come across several informative reso ...

javascriptjquery

Using Typescript with d3 Library in Power BI

Creating d3.axis() or any other d3 object in typescript for a Power BI custom visual and ensuring it displays on the screen - how can this be achieved? ...

javascripttypescriptd3.jspowerbi

Accessing a JavaScript URL beyond the Facebook frame application

I have developed a Facebook application with a navigation menu, and I am seeking a way to open links outside of the iframe app. Is it possible to achieve this? Currently, I am using the code below which loads inside the iframe but I am unable to get it t ...

javascriptfacebookiframe

Tips for displaying a tooltip when hovering over a label in a Material UI slider

I'm currently working on a slider quiz and my goal is to have the tooltip appear when hovering over the label on the slider. Currently, I can only see the tooltip when I hover directly on the thumb at the location of my mouse. Refer to the image belo ...

javascriptreactjsmaterial-uislider

The issue with importing data into Google Sheets due to an error with Ljava

After combining different scripts, I am struggling to properly input data into the code. Email Input: *Status:* *Date:* 03/31/2020 *WorkOrder:* 123456-1 *DMSShipDate:* 03/31/2020 *PONumber:* 8675309 *Company:* Test New Script var ui = SpreadsheetApp.g ...

javascriptgoogle-apps-scriptgoogle-sheets

How can a parent directive be updated in a decoupled manner from a dynamically generated view/controller that acts as a child of the parent?

I am working on an app that includes window instances. These instances can have multiple windows and each window can contain multiple views. The views are considered as children of each window instance. Both the windows and view creator are directives with ...

javascriptangularjsangularjs-directiveangularjs-service

Is it possible to use ng-src to point to a file stored locally?

I am currently experimenting with using ng-src to load images from a local folder, but I keep encountering 404 errors. Can ng-src actually reference a local folder, or do you always have to use a hardcoded path like http://example.com/imgs/{{work.img}}.jpg ...

javascriptangularjs

The elusive Yeoman composeWith module remains elusive and cannot be found

Feeling stuck on a coding problem. I've created a generator that contains other generators. When I install it from my local copy using npm link, composeWith works perfectly. But when I install the generator from GitHub, I encounter an error stating " ...

javascriptnode.jsnpmyeomannpm-install

Grab the URL from React Router

I need assistance with writing a function that updates the current location to match the route of a clicked button. Currently, the code is returning the URL of the page where the button was clicked, not the path related to the button itself. Are there an ...

javascriptreactjsreact-hooksreact-router

How can I resolve the issue of the mouse x/y glitch while drawing on an HTML canvas using JavaScript/jQuery?

I've been searching all over for a solution to this issue, but I just can't seem to find out what's causing the problem... This is my first attempt at working on something like this in my spare time. I hope to apply what I learn to create a ...

javascriptjqueryhtmlcanvasdraw

What is the best way to eliminate a specific value within a flatmap?

This is the flatMap: const choices = names.flatMap( (item) => item.name + " - " + item.size + "- " + item.category ); console.log(choices): https://i.stack.imgur.com/MO4b1.png If the item.category is equal to S-XL, how can ...

javascriptreactjs

Unconventional way of assigning class properties in Typescript (Javascript): '?='

Recently, I came across the ?= assignment expression within a class property declaration. Can anyone provide some insight into what this means? I am familiar with the new Optional Chaining feature (object?.prop), but this particular syntax is unfamiliar t ...

javascripttypescriptexpression

Is it possible to utilize a computed property for dynamically styling a table row based on certain conditions?

I have a table of users that I am currently rendering, and my goal is to highlight the entire row only for the current user. My initial thought was to use a computed property to achieve this, but I seem to be facing some difficulties in making it work. I ...

javascriptvue.js

What is preventing my counter from functioning when I click on the canvas?

I am attempting to increment the count every time a bouncing ball in the browser is clicked using this.setState({count: this.state.count + 1});. I thought my code was correct since I have done similar tasks before without using canvas, but it's not fu ...

javascripthtmlreactjsdebuggingcanvas

Verifying Angular (2+?) Compatibility: Opening and Closing Material mat-menu on Hover [GUIDE]

After extensive research, I tried various methods to hover a material menu to display its options. However, the solutions I came across were either too complicated or ineffective. Therefore, I decided to develop my own solution by combining elements of e ...

javascriptangularangular-materialangular8