Sorting by date using Angular's OrderBy filter is not functioning properly

After fetching JSON data from my server, I noticed that the date field is formatted as "StartDateTime":"2014-09-04T18:14:26Z".

To display this data in a table, I created the following structure:

 <table class="table table-condensed table-bordered table-striped table-hover responsive">
    <tr><th>Title</th><th>Start Date</th></tr>
    <tr ng-repeat="eachEvent in Events | orderBy:StartDateTime">
      <td><span>{{eachEvent.Title}}</span></td>
      <td><span>{{eachEvent.StartDateTime|date:'short'}}</span></td>
    </tr>
  </table>

However, I found that the events are not ordered correctly by the start date. Even though clicking on the column allows me to sort the dates correctly, I need the initial sorting to be accurate.

An example showcasing this issue can be found here.

Answer №1

One small change to fix the issue - don't forget to add quotes around StartDateTime. Here's the corrected line.

<tr ng-repeat="eachEvent in Events | orderBy:'StartDateTime'">

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

Leveraging a fetch request response in componentDidMount to power a subsequent request within a React-Redux component

I am currently facing a challenge with a component that triggers a fetch request (in redux) on componentDidMount. I now need to make another fetch request in the same component using the response data from the first fetch, and ideally before rendering. Si ...

Excessive calls to the component update in React with Javascript are leading to application crashes

componentDidUpdate() { // Retrieving trades from the database and syncing with MobX store axios.get(`http://localhost:8091/trade`) .then(res => { this.props.store.arr = res.data; }) } After implementing this code, my ...

Guide on how to retrieve the parent element's number when dragging starts

Within my div-containers, I have a collection of div-elements. I am looking to identify the parent number of the div-element that is currently being dragged For example, if Skyler White is being dragged, the expected output should be "0" as it is from the ...

Utilizing Google Caja for JavaScript sanitization is the only way to ensure

Looking to safeguard the inputs provided to a nodejs server with the assistance of the google-caja sanitizer. However, it's somewhat overzealous and cleanses away the > and < symbols too. My project requires me to retain html characters in the ...

Issues with Firefox and FCKeditor displaying cftextarea on a single device

On a single computer in our network, the cftextarea is not rendering properly in Firefox 41.0.2. The Firebug console displays errors only on that specific computer; SyntaxError: missing } after function body fckeditorcode_gecko.js:108:329 ReferenceError: ...

Issues Persist with Making Ajax Calls to Webservice

I've been attempting to make a simple web API call from within an HTML page using ajax when a button is clicked. However, the call consistently fails. Oddly, the issue seems to only arise with the ajax call triggered by the button click, as the loadin ...

What is the best way to populate an HTML div with content from an external HTML page using jQuery/AJAX?

I am looking to implement a feature where, upon clicking a link, the contents of an html file (home.html) will be loaded into a div container within another main html file (index.html). I specifically want to achieve this using jQuery/ajax as I have only f ...

Is it possible to employ the 'index' parameter within a 'v-for' loop that is nested inside a 'method'?

Is it possible to use the index on a v-for directive at the same level as the directive itself in order to manipulate the state being displayed? <template> <div> <div v-for="share in sharesPurchased()" :key="share"> <div&g ...

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

Seeking assistance as I am currently facing a problem where I need to loop through JSON data and add it as markers on Google Maps, but unfortunately, it only returns null value. Is there a way to automatically connect this to JSON? My plan is to have a Gr ...

obtaining the 2D coordinates of a point in 3D space using three.js

I'm currently exploring how to obtain the 2D screen coordinates for a 3D point. Using three.js, I am creating snowflakes that gently descend on the screen. Initially, I created the animation using a 2D canvas and included mouse interaction to allow u ...

Can you please explain the meaning of this statement in JavaScript/Node.js with regards to the importance of the => operator and the async and await keywords being used here?

(1) This snippet of code is used to hash a password, but the syntax may be unclear. Why does it utilize async and await in this manner? And why doesn't the => symbol seem to define a function? const hashPassword = async password => await bcrypt ...

Changing a password on Firebase using Angular 5

I am in the process of developing a settings feature for user accounts on an application I've been working on. One key functionality I want to include is the ability for users to update their password directly from the account settings page. To enable ...

Retrieving and storing successful response data in Angular JS using the $http service caching

My dataFactory is set up to retrieve posts in a simple manner: dataFactory.getPosts = function () { if (this.httpPostsData == null) { this.httpPostsData = $http.get("http://localhost/matImms/wp-json/posts?type=journey&filter[posts_per_page ...

Error: Property 'barcodeScanner' is not readable

Currently, I am utilizing barcodescanner.js for scanning QR codes. I have successfully downloaded and linked the CaptureActivity android library to my project. However, when attempting to execute the following code: window.plugins.barcodeScanner.scan(sca ...

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

How can I simplify this code to reduce its complexity? Sonarqube is flagging the error---> Refactor this method to reduce its Cognitive Complexity from 21 to the allowed 15. this.deviceDetails = this.data && {...this.data.deviceInfo} || {}; if (th ...

transferring data from JavaScript to AJAX in MVC4

I am facing an issue where I need to select a value from a grid and pass it to ajax, but I keep getting an error saying "Id undefined". Can anyone help me find a solution for this problem? The goal is to delete records that are presented in the grid. Upon ...

The protractor-jasmine2-html-reporter fails to generate an HTML report

In my protractor config.js, I have set up the configuration to generate screenshots in a specific folder, but the HTML report is not being generated. I have followed the steps mentioned in this guide: https://www.npmjs.com/package/protractor-jasmine2-htm ...

Keypress event not triggering in Android WebView when using HTML input

There seems to be a variety of issues on certain devices, such as Samsung and others, depending on the Android version, WebView version, and keyboard being used: keypress events are not triggered keydown and keyup events always show keyCode=229 keypress ...

Filtering data from nested arrays in MongoDB

My data structure and schema are as follows: { date: 0, darwin: [ { d: ['string1', 1, 0, 0, 0] }, { d: ['string2', 1, 0, 0, 0] }, { d: ['string3', 1, 0, 0, 0] } ] } I'm try ...

Guide on separating a Chart.js chart with reactive attributes into its own component in Svelte

After creating a Skeleton Project using the command npm create svelte@latest myapp, I proceeded to install Chart.js with npm install svelte-chartjs chart.js and then created a basic bar chart: <script> import { Bar } from 'svelte-chartjs' ...