Filter array of objects with min and max value along with null check

Question

So I have the following data set

const data = [
  {
    id: '11se23-213',
    name: 'Data1',
    points: [
      { x: 5, y: 1.1 },
      { x: 6, y: 2.1 },
      { x: 7, y: 3.1 },
      { x: 8, y: 1.5 },
      { x: 9, y: 2.9 },
      { x: 10, y: 1.1 }
    ]
  },
  {
    id: 'fdsf-213',
    name: 'Data2',
    points: [
      { x: 5, y: 3.1 },
      { x: 6, y: 4.1 },
      { x: 7, y: 2.1 },
      { x: 8, y: 0.5 },
      { x: 9, y: 1.9 },
      { x: 10, y: 1.4 }
    ]
  },
]

On this data set I am rendering the chart. I am trying to achieve the following things with data set.

Filter points using min and max value (user gives it in the input field)
- User have the option to only give min value
- User have the option to only give max value
- User can give both min and max value
Revert to original data if a user remove/clear both min and max value/input

Looking at the above requirement its possible that max and min value can be null.

Since I am working in Angular I will paste the code what I have done so far and I will write the problems I am facing below that.

component.ts

 const clonedData = data; // Keeping a clone so that I can revert later
 const mainData = data; // This is the data I am using for rendering chart and filtering

 // Using reactive forms of angular

 this.form.valueChanges.pipe(
   debounceTime(500),
   distinctUntilChanged(),
   tap(values => {
     if (values.min || values.max) {
       this.mainData = this.mainData.map(item => {
         return {
            ...item,
            points: items.points.filter(point => point.y >= values.min && point.y <= values.max)
         });
        return;
     }
     
     // If both null revert to original data;
     this.mainData = this.clonedData;

   }).subscribe()

I understand there is some issues in my code.

One of the main issue is even if I provide both min and max value or one of them the points array always return empty.

When I clear or remove both value then it goes in the else condition and revert to default data (which is working).

Majed Badawi · Accepted Answer · 2022-02-27 19:39:31Z

2

Try this:

const data = [
  {
    id: '11se23-213',
    name: 'Data1',
    points: [ { x: 5, y: 1.1 }, { x: 6, y: 2.1 }, { x: 7, y: 3.1 }, { x: 8, y: 1.5 }, { x: 9, y: 2.9 }, { x: 10, y: 1.1 } ]
  },
  {
    id: 'fdsf-213',
    name: 'Data2',
    points: [ { x: 5, y: 3.1 }, { x: 6, y: 4.1 }, { x: 7, y: 2.1 }, { x: 8, y: 0.5 }, { x: 9, y: 1.9 }, { x: 10, y: 1.4 } ]
  }
];

const filter = (arr, min, max) => 
  arr.map(e => ({
    ...e,
    points: e.points.filter(({ y }) => (min === null || y >= min) && (max === null || y <= max))
  }));

console.log('min=1, max=2', filter(data, 1, 2));
console.log('min=null, max=2', filter(data, null, 2));
console.log('min=1, max=null', filter(data, 1, null));
console.log('min=null, max=null', filter(data, null, null));

edited Feb 27, 2022 at 19:39

answered Feb 27, 2022 at 19:13

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Johanur Rahman Over a year ago

Hello. Thanks for your response. But a problem still exist in my case. Let share the scenario with array length. First the points have array length 4334. When I am just providing min value of 2 it gets filtered and return array length 3926. Then when I am giving max value its getting filtered and return array length 302. But the problem arises when I am lets just removed max value (made it null) so the min have value of 2 and max is null but my array length is still 302. Should revert back to 3926 right?

Abhay Prince Over a year ago

The problem is with the cloning. You are not cloning, its using the same reference. To clone use can use const clonedData = JSON.parse(JSON.stringify(data));

Majed Badawi Over a year ago

A good approach: in the listener set this.mainData = this.clonedData.map ... instead of this.mainData = this.mainData.map

Johanur Rahman Over a year ago

@AbhayPrince Thank you for noticing that. It was a silly mistake not sure how I missed it. Thanks again

Johanur Rahman Over a year ago

@MajedBadawi Thanks man. Its working perfectly.

|

Collectives™ on Stack Overflow

Filter array of objects with min and max value along with null check

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related