Utilize moment.js to filter an array of objects based on 'last month' and 'last week' when clicked

Question

Utilize moment.js to filter an array of objects based on 'last month' and 'last week' when clicked

In my database, each object has a dateCreated value of 2015-12-11T11:12:14.635Z

I'm trying to filter this array for the past week and month.

The issue is that if today is March 19th, I want to search from the 11th to the 18th for the last 7 days, starting at 00:00:01 each day.

First, I need to calculate the past week using moment.js based on the current date and then convert it to the required format for filtering data.

In essence, I am looking to determine the dates for the previous week using the current timestamp.

javascript angularjs filter momentjs angular-moment

Answer 1

Answer №1

Ensure the following date configurations:

var last7DayStart = moment().startOf('day').subtract(1,'week');
var lastMonthThisDay = moment().startOf('day').subtract(1,'month');
var yesterdayEndOfRange =  moment().endOf('day').subtract(1,'day');

If dealing with a javascript filter, consider using lodash. Here's an example:

var javascriptArrayOfObjectsWithDates = [
          { date : '2015-12-11T11:12:14.635Z', anotherProperty: 0 },
          { date : moment().subtract(1, 'day' ).format(), testThis: 'works!'}
        ];

var filteredObjects = _.filter(javascriptArrayOfObjectsWithDates,     
                       function(each){ 
                          return moment(each.date)
                            .isBetween(last7DayStart, yesterdayEndOfRange) ;
                       });

Answer 2

Ensure the following date configurations:

var last7DayStart = moment().startOf('day').subtract(1,'week');
var lastMonthThisDay = moment().startOf('day').subtract(1,'month');
var yesterdayEndOfRange =  moment().endOf('day').subtract(1,'day');

If dealing with a javascript filter, consider using lodash. Here's an example:

var javascriptArrayOfObjectsWithDates = [
          { date : '2015-12-11T11:12:14.635Z', anotherProperty: 0 },
          { date : moment().subtract(1, 'day' ).format(), testThis: 'works!'}
        ];

var filteredObjects = _.filter(javascriptArrayOfObjectsWithDates,     
                       function(each){ 
                          return moment(each.date)
                            .isBetween(last7DayStart, yesterdayEndOfRange) ;
                       });

Answer 3

Answer №2

This method worked perfectly for me:

_this.lastWeek = function () {
  var result = moment().subtract(7,'days').hours(0);   
  return result._d;
};

_this.lastMonth = function () {
  var result = moment().subtract(30,'days').hours(0);   
  return result._d;
};

Next, I used underscoreJS to filter my array (loadash can also be used):

_this.thisWeekData = _.filter(_this.inbox, function(inbox) {
    return (moment(inbox.createdAt) > _this.lastWeek());
});

_this.lastWeekData = _.filter(_this.inbox, function(inbox) {
    return ((moment(inbox.createdAt) < _this.lastWeek()) && (moment(inbox.createdAt) > _this.lastMonth()));
});

_this.lastMonthData = _.filter(_this.inbox, function(inbox) {
    return (moment(inbox.createdAt) < _this.lastMonth());
});

If you prefer not to handle this logic in your controller, consider using the "Angular-filter" library directly in HTML.

You can find the angular-filter library here

Thank you all for your support!

Answer 4

This method worked perfectly for me:

_this.lastWeek = function () {
  var result = moment().subtract(7,'days').hours(0);   
  return result._d;
};

_this.lastMonth = function () {
  var result = moment().subtract(30,'days').hours(0);   
  return result._d;
};

Next, I used underscoreJS to filter my array (loadash can also be used):

_this.thisWeekData = _.filter(_this.inbox, function(inbox) {
    return (moment(inbox.createdAt) > _this.lastWeek());
});

_this.lastWeekData = _.filter(_this.inbox, function(inbox) {
    return ((moment(inbox.createdAt) < _this.lastWeek()) && (moment(inbox.createdAt) > _this.lastMonth()));
});

_this.lastMonthData = _.filter(_this.inbox, function(inbox) {
    return (moment(inbox.createdAt) < _this.lastMonth());
});

If you prefer not to handle this logic in your controller, consider using the "Angular-filter" library directly in HTML.

You can find the angular-filter library here

Thank you all for your support!

Answer 5

Answer №3

If you want to go back in time to exactly 7 days ago at midnight, use the following code:

let sevenDaysAgo = moment().subtract(7,'days').startOf('day');

let thirtyDaysAgo = moment().subtract(30,'days').startOf('day');

From there, you can format the date and time however you prefer. For example, to convert it to a Unix timestamp in milliseconds:

let sevenDaysAgoMilliseconds = sevenDaysAgo.format('x');

Now you can easily compare these timestamps for your needs.

Answer 6

If you want to go back in time to exactly 7 days ago at midnight, use the following code:

let sevenDaysAgo = moment().subtract(7,'days').startOf('day');

let thirtyDaysAgo = moment().subtract(30,'days').startOf('day');

From there, you can format the date and time however you prefer. For example, to convert it to a Unix timestamp in milliseconds:

let sevenDaysAgoMilliseconds = sevenDaysAgo.format('x');

Now you can easily compare these timestamps for your needs.

Answer 7

Answer №4

My method of categorizing by time periods:

Today

Last 7 Days (Including Last Week)

Last 30 Days (Including Last Month)

const today = moment();
const lastSevenDays = moment().subtract(7, 'days');
const lastThirtyDays = moment().subtract(30, 'days');

const FILTER_MAP = {
  All: () => true,
  Today: task => task.timestamp.isBetween(today, today, 'day', '[]'), // [] denotes inclusive
  Week: task => task.timestamp.isBetween(lastSevenDays, today, 'day', '[]'),
  Month: task => task.timestamp.isBetween(lastThirtyDays, today, 'day', '[]'),
};

const DATA = [
  { id: "0", name: "Eat", timestamp: moment().subtract(6, 'days') },
  { id: "1", name: "Sleep", timestamp: moment() },
  { id: "2", name: "Pawn", timestamp: moment().subtract(28, 'days') },
  { id: "3", name: "Repeat", timestamp: moment().add(1, 'days') } // for testing purposes + 1 day
];

Answer 8

My method of categorizing by time periods:

Today

Last 7 Days (Including Last Week)

Last 30 Days (Including Last Month)

const today = moment();
const lastSevenDays = moment().subtract(7, 'days');
const lastThirtyDays = moment().subtract(30, 'days');

const FILTER_MAP = {
  All: () => true,
  Today: task => task.timestamp.isBetween(today, today, 'day', '[]'), // [] denotes inclusive
  Week: task => task.timestamp.isBetween(lastSevenDays, today, 'day', '[]'),
  Month: task => task.timestamp.isBetween(lastThirtyDays, today, 'day', '[]'),
};

const DATA = [
  { id: "0", name: "Eat", timestamp: moment().subtract(6, 'days') },
  { id: "1", name: "Sleep", timestamp: moment() },
  { id: "2", name: "Pawn", timestamp: moment().subtract(28, 'days') },
  { id: "3", name: "Repeat", timestamp: moment().add(1, 'days') } // for testing purposes + 1 day
];

Utilize moment.js to filter an array of objects based on 'last month' and 'last week' when clicked

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Locate the hyperlink within a div using JavaScript and navigate to it

Updating the state of a disabled field in a React component

React - manipulating data with state, yay or nay?

Difficulty reloading after updating input using AngularJS ngTable

Error encountered: MongoDB cast exception - nested subdocument

Trouble Encountered with AngularJS ng-bind-html and Text not Wr

Buttons in Highcharts

Switching background images dynamically depending on the screen size: CSS and HTML5 Gallery

Issue encountered during rendering: The function used is not a filter

Check if the path meets the criteria to be considered valid JavaScript code

The find function is malfunctioning in React

jQuery Issue - Clash between multiple menus sharing the same class

Implement a mouseenter event to all input elements that have specific names stored in an array, utilizing jQuery

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

Angular-UI's global modals: the key to international success

Opening the Gmail app from a link using JavaScript

How to toggle a boolean variable in AngularJS when transitioning between states

Tips for altering the label color of an md-input-container after text has been entered

Utilizing a plugin to execute a function in Wordpress

Switching an element from li to div and vice versa using Jquery Drag and Drop