Organizing a mat-table by date does not properly arrange the rows

My API retrieves a list of records for me. I would like to display these records sorted by date, with the latest record appearing at the top. However, the TypeScript code I have written does not seem to be ordering my rows correctly. Can anyone assist me in identifying what I may be doing wrong?

this.recommendationService
    .getJobExecutionStatList(project.id)
    .subscribe(data => {
        let data1: any = data;
        this.jobExecutionList = new MatTableDataSource();
        var sortedArray: Array<any> = data1.sort((n1, n2) => {
            let date1 = new Date(n1.executionDate.replace('T','').replace(/-/g,'/'));
            let date2 = new Date(n2.executionDate.replace('T','').replace(/-/g,'/'));
            
            if (date1 > date2) {
                return 1;
            }
            if (date1 < date2) {
                return -1;
            }

            return 0;
        });

        console.log(sortedArray);
        this.jobExecutionList.data = sortedArray;
        this.jobExecutionList.sort = this.sort;
        this.jobExecutionList.paginator = this.paginator;
    });
}

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

Is there a way to deactivate all dot inputs on number type input in vue.js 2?

Here is an example of my HTML code: <div id="app"> <input type="number" v-model="quantity"/> </div> This is how my Vue component looks: new Vue({ el: '#app', data: { quantity: '' }, watch: { quanti ...

`mdTooltip in angular2-material does not have the capability to render HTML content

There seems to be an issue with using HTML in mdTooltip in angular2-material. Current package version for angular material: @angular/material": "2.0.0-beta.11 HTML Markup in Use: <span mdTooltip="<p>tooltip message</p>" mdTooltipPosit ...

Debugging and ensuring the functionality of Cordova (Phonegap) HTTPS connections

There is an HTTPS site with an API that needs to be accessed. I need to work from Cordova (AngularJS) with its HTTPS API. Additionally, I want to debug the AngularJS app in a web browser (Chrome) because it's much quicker compared to rebuilding and ...

Using Aurelia to create a schema form

In my project, I am utilizing Aurelia to create a dynamic form based on a JSON data. The form is being generated from a JSON structure similar to the one shown below: Schema = [{ 'key': 'Name', 'display': 'Name&a ...

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

Is it possible to enlarge the panel only by clicking on the text, without affecting the entire header panel?

I need help with my accordion setup. I want to be able to expand or collapse each panel by clicking only on the header text, not the entire header area. Can anyone provide guidance on how to achieve this? For example, when I click on the text for 'He ...

creating grunt shortcuts with specified option values

Is it possible to create custom aliases in Grunt, similar to npm or bash? According to the Grunt documentation, you can define a sequence of tasks (even if it's just one). Instead of calling it "aliasing", I believe it should be referred to as "chaini ...

Unable to modify the theme provider in Styled Components

Currently, I am attempting to customize the interface of the PancakeSwap exchange by forking it from GitHub. However, I have encountered difficulties in modifying not only the header nav panel but also around 80% of the other React TypeScript components. ...

Unexpected behavior from vuelidate triggered on blur

I have implemented vuelidate for form validation. My goal is to validate user input either when they move to the next input field or click outside of the current one. <div class="form-group col-md-6" :class="{invalid: $v.partner.email.$ ...

Continuously receiving the value of undefined

I am currently working on a JavaScript Backbone project and I have declared a global object as follows: window.App = { Vent: _.extend({}, Backbone.Events) } In the initialize function, I have done the following: initialize: function () { window.App ...

Steps to retrieve the central coordinates of the displayed region on Google Maps with the Google Maps JavaScript API v3

Is there a way to retrieve the coordinates for the center of the current area being viewed on Google Maps using JavaScript and the Google Maps JavaScript API v3? Any help would be greatly appreciated. Thank you! ...

Is the process.env.NODE_ENV automatically set to 'production'?

While examining someone else's code, I noticed this particular line. if (process.env.NODE_ENV === 'production') { ... The application in question is a node.js app with express server and reactjs front-end. If we were to deploy it on Heroku ...

Pass RGBA color code from JavaScript to Laravel controller

I have an exciting project where users need to select a color value in hex format. Once I retrieve this value in JavaScript, I convert it to Rgba format. Now, my challenge is figuring out how to send this converted value to the controller for database stor ...

Node.js version 12.7 does not have the ability to support dynamic keys within objects

According to what I've read about ecma6, it should allow for dynamic key objects. I recently upgraded my node to version 0.12.7, but I'm still encountering an error. node /var/www/games/node_modules/app.js /var/www/games/node_modules/app.js ...

Characteristics within the primary template element of a directive

I'm having an issue with the following directive code: .directive('myDirective', function () { restrict: 'E', replace: true, transclude: true, scope: { label: '@', ngModel: '=', ...

Unable to display results in React Native due to FlatList not being shown

I'm a beginner to React Native and I'm attempting to create a simple flatlist populated from an API at , but unfortunately, no results are displaying. Here's my App.tsx code: import React from 'react'; import type {PropsWithChildre ...

Does the layout.tsx file in Next JS only affect the home page, or does it impact all other pages as well?

UPDATE After some troubleshooting, I've come to realize that the issue with my solution in Next JS 13 lies in the structure of the app. Instead of using _app.tsx or _document.tsx, the recommended approach is to utilize the default layout.tsx. Althou ...

What exactly does the ".subscribe" function do within Angular framework?

Currently, I am exploring the angular-tour-of-heroes application and came across the .subscribe method in routing. Can anyone provide an explanation of what is happening in this code snippet? If you'd like to check out the app yourself, here's t ...

Executing JavaScript functions externally from the Angular 6 application

I have a unique scenario where my angular 6 app is embedded within another application that injects JavaScript to the browser to expose specific functionalities to the angular app. For example, when running my angular app within this external application, ...

Creating dynamic dropdown menus using JSON files in jQuery mobile is a useful technique for enhancing user experience on

I am working with a massive table (8 MBytes) that I need to filter using a small JavaScript application. The process works as follows: Countries Regions Skills I want the user to select one country, one region, and multiple skills as filters. Based on ...