Convert Object Keys to Month Format for Sequential Display of Months in AngularJS

I'm having trouble formatting an object key to display months chronologically. I can't figure out what I'm doing wrong. Here's the code in the view:

<div ng-repeat="month in months | orderBy: 'english' | date: 'MMMM' ">
     <h1><strong>{{ month.english }}</strong></h1>
     <p><strong>French Word: </strong>{{ month.french }}</p>
     <p><strong>Number of Days: </strong>{{ month.days }}</p>
     <hr />
</div>

Here is a snippet of the object:

angular
    .module('myApp', [])
    .controller('myCtrl', function($scope) {
        var months = [
            {
                english: 'August',
                french: 'Aout',
                days: 31,
                ordinal: 8,
                season: 'summer'
            },
            {
                english: 'March',
                french: 'Mars',
                days: 31,
                ordinal: 3,
                season: 'spring'
            },
            {
                english: 'February',
                french: 'Fevrier',
                days: 28,
                ordinal: 2,
                season: 'winter'
            }
        ];
        $scope.months = months;
    });

Currently, it's sorting alphabetically and not by month. Any idea where I went off track?

Answer №1

Your implementation of the date filter is not accurate. The date filter only accepts a Date object, timestamp, or ISO 8601 datetime string as input.

For more information, refer to the Angular documentation.

If you want to order data chronologically, consider using the ordinal for sorting, as you already have that information available.

<div ng-repeat="month in months | orderBy: 'ordinal'">

Answer №2

To properly order by month number, consider utilizing orderBy: 'ordinal' in place of orderBy: 'english'

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

Tips for locating precise information within nested object formations using Javascript

Within my code, I have showcased two distinct types of response. Upon closer examination of the following code snippets, it becomes evident that the structure of the response from a service differs slightly between the two types. In the first type, there i ...

Switch the angular attribute by clicking on ng-click

I have a Google Map set up with markers that I need to switch on and off. <marker id='{{marker.id}} 'visible="{{ condition ? 'true' : 'false'}}"> </marker> Additionally, I have created a button to control the v ...

What is the process for confirming the authenticity of lengthy passwords with bcrypt?

"I encountered a problem that I just can't seem to solve. I set up an authentication flow using JWT with access and refresh tokens. The refresh tokens expire after a long time period, and they can be reset to prevent unauthorized use of stolen refresh ...

Using Node.js to download and install npm packages from the local hard drive

Is there a way to add an npm package to my Node.js project from my hard drive? It seems like the admin at work has restricted access to npm. I managed to install npm, but whenever I attempt to run "npm install express" in the command line, I keep getting ...

Looking for tags similar to stackoverflow?

Is there a way to create a search box similar to the one in Tags where tag names are displayed immediately upon entering without pressing enter key? Could anyone provide me with a script or tutorial on how to achieve this? Is it done using JavaScript or j ...

Proper method for declaring a global variable within a React component

In the process of working on my react.js project, I have encountered a situation where I need all components to be able to access an object before the main component is rendered. My current approach involves passing the object as a prop to the main compo ...

The AJAX response is shown just a single time

My code is designed to send an ajax request when a form is submitted, specifically a search module. It works perfectly the first time the form is submitted, highlighting the table when data is returned. However, I am only able to see the effect once, as th ...

Is there a way to make all Bootstrap column heights equal using only jQuery?

I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...

What is the process for altering a variable within an Ajax function?

Scenario: I'm dealing with JSON data fetched from the backend which needs to be presented in a table format. To achieve this, I've created a string called tableOutputString and am populating it by iterating through the JSON response. Finally, I&a ...

What is the best way to toggle DOM classes in React using Material-UI components?

Currently utilizing Material UI alongside React, I have a div element: <div className={classes.div}></div> I am attempting to dynamically add a conditional class to it: <div className={classes.div + divActive ? `${classes.div}__active` : &a ...

leveraging the localStorage feature in a for-in iteration

I am new to stackOverflow, although I have browsed the forums for help in the past. However, this time I couldn't find a solution to my current issue, so I decided to create an account and seek assistance. The problem at hand is related to a workout ...

AngularJS - Trouble loading directive

I'm facing some challenges with a custom directive I've created and it's not functioning as expected. Below is the code for my directive: angular .module('thermofluor') .directive('myCustomer', function() { return ...

Guide on saving an Express session into a MongoDB database through a controller handling

I'm experiencing a problem with my controller where the session is not being stored properly even after implementing the necessary express session code app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, ...

Implementing dropdown filtering for nested ng-repeats in Angular application

I currently have the following data structure set up: vm.years = [{ year: number, proevents: [{year: number, division: string, level: string, place: string, names: string}], nonproevents: [{year: number, division: string, level: string, place: st ...

Discovering distinct values within an array using React/js

I am a complete novice in JavaScript and ReactJS. The majority of the code below is sourced from tutorials that I am attempting to modify. Essentially, the code displays all the values from the "tag" (people, places, things, etc.) as inline li elements to ...

Determine the absent information by comparing two JSON objects with JavaScript

Two JSON objects, counties and ctyIndem, are at hand. The counties object contains all the counties in a specific US State, while ctyIndem holds information about indemnities paid in that State by county, excluding those with no payments made. My task is t ...

Receiving an error while trying to install packages from the NPM registry due to non

I am facing some challenges while attempting to install my Ionic App through the registry along with its dependencies. I have been using npm i --loglevel verbose command, and my ~/.npmrc file is configured as follows: //nexus.OMMITED.com/repository/:_auth ...

Guide to generating and executing a file in node.js

After installing the newest version of node.js, I verified it in the command prompt by running node-v and npm-v commands. Now, I'm looking to learn how to create and execute files using node.js. Can someone provide guidance on this process? ...

utilizing a button to input text data into an angular application

I'm currently utilizing Angular with a MySQL backend. I have a lingering suspicion that I might be overlooking something with ng-model. Whenever I attempt to add a new idea, nothing seems to happen. Any suggestions? It was working fine initially, bu ...

What is the best way to divide a single object in an array into multiple separate objects?

In my dataset, each object within the array has a fixedValue property that contains category and total values which are fixed. However, other keys such as "Col 2", "Col 3", etc. can have random values with arbitrary names like "FERFVCEEF erfe". My goal is ...