Filter array based on start and end date using javascript

Question

I have an array of data with start and end date which is being displayed in angular calendar. I would like to filter the array based on the start and end date.

0: {id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}
1: {id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
2: {id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:03:21Z"}
3: {id: 86, start_date: "2019-11-26T18:30:00Z", end_date: "2019-11-27T07:03:21Z"}
4: {id: 66, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
5: {id: 66, start_date: "2019-11-05T18:30:00Z", end_date: "2019-11-12T07:03:21Z"}

If I am on day 2019-11-07 (I couldn't get the date from here for filter) I want to build an array like this from above without using the 2019-11-07

0: {id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}
1: {id: 66, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}

The following is the filter i have written

data.forEach((item, index) => {
if (index !== data['results'].findIndex(i => i.id === item.id && 
new Date(i.start_date).toDateString() === new Date(item.start_date).toDateString() && 
new Date(i.end_date).toDateString() === new Date(item.end_date).toDateString())) {
data.splice(index, 1);
}                   
});
console.log(data);

If I am on 2019-11-07, i am not able to remove this item

0: {id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}

Can anyone help me?

Why .forEach(), .findIndex() and .splice() and not a simple .filter()? — Andreas
– Andreas, Commented Nov 7, 2019 at 12:09
Converting a string into a date and then converting it back into a string to compare it against another string is at least strange... — Andreas
– Andreas, Commented Nov 7, 2019 at 12:10
Actually, I don't want to build an array. I just wanted to remove the unwanted items from array. For better understanding expected output shows there — Jomol MJ
– Jomol MJ, Commented Nov 7, 2019 at 12:13
Quote from your question: "I want to build an array like this from above..." — Andreas
– Andreas, Commented Nov 7, 2019 at 12:15

Massimiliano Sartoretto · Accepted Answer · 2019-11-07 12:20:39Z

2

Use filter instead of forEach:

const filterDate = {
  start_date: "2019-11-07T09:00:13Z",
  end_date: "2019-11-07T09:00:13Z",
};

const filteredItems = data.filter((item, index) => item.start_date >= filterDate.start_date && item.end_date <= filterDate.end_date);

I'm not sure whether you really want to include only the specific date or all the items contained in the selected interval. This example assumes the latter.

Also you might not always have the filterDate object so you want to add specific logic to check that.

answered Nov 7, 2019 at 12:20

Massimiliano Sartoretto

1,36110 silver badges22 bronze badges

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

3 Comments

Jomol MJ Over a year ago

I have a calendar to mark the leaves of employees. So from calendar I have to see the count of employees leave on a particular day. On page load, I am getting data from api and I can filter the array with same start date and end date. However, someone might be taking leave on series of days and where the start and end date will be different. But the specific day include. This situation I wanted to implement here. Can you help me?

Zee Over a year ago

@JomolMJ here you should add start and end date query support to the API which will give you the filtered data instead of creating an overhead to the frontend. What you do at the frontend is simply update the state with the API filtered data.

Jomol MJ Over a year ago

@MohdZeeshan, I want to mark the calendar with the count of persons on leave on page load. This is the ui from client and I am not able to change it. any possibilities to achieve it?

Zee · Accepted Answer · 2019-11-08 07:55:00Z

Here what you need to is as per filter date selection: filterStartDate time should 00:00:00 and filterEndDate time should be 23:59:59...

secondly use below code...

let data = [
{id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}
,{id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
,{id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:03:21Z"}
,{id: 86, start_date: "2019-11-26T18:30:00Z", end_date: "2019-11-27T07:03:21Z"}
,{id: 66, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
,{id: 66, start_date: "2019-11-05T18:30:00Z", end_date: "2019-11-12T07:03:21Z"}
]


const filterDate = {
  start_date: "2019-11-04T00:00:00Z",
  end_date: "2019-11-07T23:59:59Z",
};

const filteredItems = data.filter((item, index) => (new Date(item.start_date).getTime() >= new Date(filterDate.start_date).getTime() && new Date(item.end_date).getTime() <= new Date(filterDate.end_date).getTime()));

const personCount = filteredItems.length;

console.log(`Person count >>>>>>> ${personCount}`);

Collectives™ on Stack Overflow

Filter array based on start and end date using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related