Filtering data in Angular based on specific dates

Upon receiving data from an Angular service, I have a JSON object structured like this:

[
    {
        "id": 2,
        "order_status": "R",
        "order_date": "2015-09-12T07:58:24.733834Z",
        "update_timestamp": "2015-10-05T04:22:44.904227Z"
    },
    {
        "id": 8,
        "order_status": "D",
        "order_date": "2015-09-18T03:46:50.469051Z",
        "update_timestamp": "2015-09-23T19:19:31.658001Z"
    }
]

Storing this data in the variable $scope.order_items, I then proceed to filter it based on the order_status column:

$scope.order_items = data;
$scope.received = ($scope.order_items.filter(function(item) { return (item.order_status == 'R');}));
$scope.delivered = ($scope.order_items.filter(function(item) { return (item.order_status == 'D');}));

My current goal is to further filter the data by the order_date column to isolate all entries made today into a separate variable. How can I achieve this?

Answer №1

UPDATE: After further review, it appears that a Date() object is needed for the order_date in order to perform the == comparison below.

Although there are various Javascript Date manipulation libraries to consider (rather than using the setHours(...) method described here), the following code snippet demonstrates how to achieve the desired outcome:

var today = new Date();
var todaysDates = $filter('filter')($scope.order_items, function(item) {

    if(item.order_date.setHours(0,0,0,0) == today.setHours(0,0,0,0)) {
        return true;
    } else {
        return false;
    }

});

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

Incorporate pictures from the popup onto the main page

I have developed a basic PHP image editor script where users can select images from galleries and merge them together. However, I am facing an issue: The galleries open in a popup while the editor area is on the parent page. I am looking for a JavaScript ...

Basic event listener function, functional in CodePen but not operating in Chrome web browser

I'm experiencing an issue where event listener functions are not working on my browser (Chrome), but they work fine on CodePen. I've been troubleshooting this for about 2 hours, and I'm seeking some insights. Can anyone help? CodePen Link: ...

An example of using quotes within quotes is an HTML tag embedded within JavaScript code

Currently, I'm working on a JavaScript code where clicking assigns the function getImage the source of an image to be displayed later on the page. The issue I'm facing revolves around dealing with quotation marks. <img src="bill.jpg" class=" ...

Article: Offering CoffeeScript and JavaScript Assets Simultaneously

Currently, my web app is up and running using Node and Express. I initially developed it in JavaScript but now want to transition over to CoffeeScript. My goal is to have both file1.js and file2.coffee coexisting in the application (with both being served ...

verifying the user's screen dimensions

I'm currently exploring ways to customize the appearance of my website based on the viewer's screen resolution. I am interested in potentially optimizing the layout for vertical screens on mobile devices, and horizontal screens for laptops. Addit ...

Javascript - Could anyone provide a detailed explanation of the functionality of this code snippet?

Ever since joining a new company 9 months ago, I've been encountering this line of code in JavaScript. It seems to work fine and I've been incorporating it into my coding style to align with the previous developers. However, I'm not entirely ...

Filter an array containing objects within objects and use the reduce method to calculate the total value

Here is an array of objects that I'm working with: const data = [ { "order_id":38795, "order_type":"Music", "date":"2021-08-14", "name":"Concert ...

Improving communication between Components in ReactJS

I am attempting to update the state from one component to another component. I wish for the state total on header.jsx to be updated when I click on the add to cart button on product.jsx Below is my code: index.jsx // Code for index.jsx goes here head ...

Creating a multilingual website with Nextjs 13 App Router using internalization, all without the need

As I develop a web app that requires user authentication to access, I am currently using Next.js 13 with the App Route (not Pages Route). My goal is to implement internationalization without having to create sub-routes like /en, or use domains such as mywe ...

Vue.js methods bound as properties on a parent object

There are times when I come across scenarios where it would be convenient to bind methods as an object property rather than a direct Vue method. For instance, instead of: <MyInput :formatter="currencyFormat" :parser="currencyParser& ...

Husky 5: The Ultimate Gitignore Manager

Last week, a new version of Husky was released, known as Husky 5. I came across an interesting article discussing the features and updates in this release that can be found here. Upon migrating to Husky 5 (), I discovered a new directory named .husky with ...

Developing Android Local Notifications with AngularJS and Ionic

I've encountered an issue with Android mobile notifications while working on a project using AngularJS and the Ionic framework. My goal is to implement local notifications, so I decided to utilize this plugin: https://github.com/katzer/cordova-plugin ...

Display a loading dialog when an AJAX request is made

I am working on a Grails application and I would like to implement a visual indicator, such as a modal dialog, to show when an AJAX request is in progress. Currently, I rely on JQuery for all my AJAX requests. While they are triggered using Grails tags at ...

Deactivating AngularJS debug information in a gulp / typescript production compilation

What is the most effective approach to disabling debug data in a gulp production build? The recommended method for disabling debug data is: myApp.config(['$compileProvider', function ($compileProvider) { $compileProvider.debugInfoEnabled(false ...

Generating a JSON object using HTML select elements

Looking to generate a JSON string that includes select values and inner HTML values in a map format. For example: <select id="my-select"> <option value="1">one</option> <option value="2">two</option> </select> var json ...

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

Ensuring the authenticity of pubsubhubbub content signatures using Node.js and Express

Recently, I started working with Express and I'm currently in the process of setting up a middleware to handle a specific X-Hub-Signature based on the guidelines provided here: My goal is to create a middleware that can manage this task before the re ...

What is the initial Validity setting in Angular?

When working on an Angular project, I encountered an issue where setting $setValidity to false caused some trouble. $scope.form[key].$setValidity("has_already_taken", false); I was unsure of how to reset the validity to true. I attempted using $scope.for ...

Altering the color of an Ionic Navbar by clicking on an Ionic tab

I'm working with Ionic directives generated by Ionic Creator. The layout includes a standard nav-bar at the top and tabbed navigation icons at the bottom, each with its own color. My goal is to update the navbar's color when an icon is clicked. ...

Discovering an npm module within an ember-cli addon component

I recently encountered an issue while using ember-browserify to locate npm modules in my ember-cli applications - it seems to not function properly for ember-cli addons. This leads me to wonder: Are there alternative methods for importing npm modules into ...