How to filter data in AngularJS with min and max?
I have the following data:
$scope.events = [{
"date": "2015-01-01",
"name": "party"
}, {
"date": "2015-02-01",
"name": "birthday"
}, {
"date": "2015-03-01",
"name": "graduation"
}, {
"date": "2015-04-01",
"name": "wedding"
}];
And the user can select a date range like:
$scope.dateRange = [
"start": "2015-01-01",
"end": "2015-03-01"
];
In this case, I want to show data that is between the dates selected by the user, for example:
$scope.selectedEvents = [{
"date": "2015-01-01",
"name": "party"
}, {
"date": "2015-02-01",
"name": "birthday"
}, {
"date": "2015-03-01",
"name": "graduation"
}];
In this case, the user has selected a date range that contains data, but if the user selects a date range that is outside of the available data, for example:
$scope.dateRange = [
"start": "2014-12-01",
"end": "2015-08-01"
];
Then I want to return the following:
$scope.events = [{
"date": "2014-12-01",
"name": ""
}, {
"date": "2015-01-01",
"name": "party"
}, {
"date": "2015-02-01",
"name": "birthday"
}, {
"date": "2015-03-01",
"name": "graduation"
}, {
"date": "2015-04-01",
"name": "wedding"
}, {
"date": "2015-05-01",
"name": ""
}, {
"date": "2015-06-01",
"name": ""
}, {
"date": "2015-07-01",
"name": ""
}, {
"date": "2015-08-01",
"name": ""
}];
source to share
After that you should start .. variables changed to non-scalable for easy js testing
var dateRange = {
"start": "2015-04-01",
"end": "2015-07-01"
};
var startDate = new Date(dateRange.start),
endDate = new Date(dateRange.end);
var res = events.filter(function(item){
var date = new Date(item.date);
return date >= startDate && date <=endDate;
});
If you want to extrapolate dates, sort the defualt data by date and check the first and last values. Then create a loop to add additional elements to the main array before filtering
source to share
using underscore. Also add logic if the date range exceeds the number of missing values with empty names
var events = [{
"date": new Date("2015-01-01"),
"name": "party"
}, {
"date": new Date("2015-02-01"),
"name": "birthday"
}, {
"date": new Date("2015-03-01"),
"name": "graduation"
}, {
"date": new Date("2015-04-01"),
"name": "wedding"
}];
//console.log(events);
var startDate = new Date("2015-01-01");
var endDate = new Date("2015-03-01");
var filteredDate = _.chain(events)
.filter(function(event){return event.date.getTime() >= startDate.getTime();})
.filter(function(event){return event.date.getTime() <= endDate.getTime();})
.value();
console.log(filteredDate);
source to share
I updated the fiddle to add the code needed to add empty events when your range is out of the available data.
Here's the code:
var events=[{
"date": "2015-01-01",
"name": "party"
}, {
"date": "2015-02-01",
"name": "birthday"
}, {
"date": "2015-03-01",
"name": "graduation"
}, {
"date": "2015-04-01",
"name": "wedding"
}];
var dateRange = {
"start": "2014-11-01",
"end": "2016-01-01"
};
var startDate = new Date(dateRange.start),
endDate = new Date(dateRange.end);
var eventsOfRange = [];
var curDate = new Date(startDate);
while(curDate <= endDate) {
// we'll add the correct name for the dates that have an event later
eventsOfRange.push({
date: curDate.toISOString().substring(0, 10),
name: ""
});
curDate.setUTCMonth(curDate.getUTCMonth()+1);
}
var filteredEvents = events.filter(function(item){
var date = new Date(item.date);
return date >= startDate && date <= endDate;
});
function find(eventsArray, date) {
return eventsArray.reduce(function(indexFound, curEvent, index) {
if(date === curEvent.date && indexFound === -1) {
return index;
}
return indexFound;
}, -1);
}
filteredEvents.forEach(function(event) {
var index = find(eventsOfRange, event.date);
eventsOfRange[index].name = event.name;
});
document.getElementById('pre').innerHTML = JSON.stringify(eventsOfRange, null, ' ')
source to share