Ordering items in Angular Filter OrderBy is based on a specific string sequence, rather than following

As I iterate through a list of objects in an ng-repeat, I am facing the challenge of sorting them based on their 'approved' attribute. The possible values for 'approved' are 'APPROVED', 'DENIED', or 'PENDING'. My goal is to have items with 'PENDING' status appear first, followed by 'APPROVED', and then 'DENIED'. Alphabetical sorting does not give me the desired result, and I am uncertain if there is a way to specify a custom order for sorting using orderBy. Currently, the sorting is done alphabetically and by date:

orderBy: ['approved', 'date']

Is there any workaround or method to utilize orderBy to achieve this specific sorting order?

Thank you.

javascriptangularjs

Answer №1

Maybe consider incorporating an attribute in your objects such as a priority property or an order property, where "Pending" =1, etc... You can then bind to the status while sorting based on the priority/order.

[{status:'pending', order:1},{status:'approved', order:2},{status:'denied', order:3}

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

Exploring VueJS reactivity: Updating an array with new data

I am struggling to understand why certain methods of changing data seem to work while others do not. In an attempt to clarify, I experimented with the following example: watch: { '$store.state.linedata': function() {this.redraw()} } ...

javascriptarraysvue.jsvuex

Encountering numerous errors when attempting to incorporate lottie-web into my JavaScript file

I am in the process of creating a unique audio player for my website utilizing HTML, CSS, and JavaScript. I encountered some challenges while trying to get it to work effectively on Codepen as well as my text editor. The animations were not functioning pro ...

javascripthtmlcssweblottie

What is the best way to determine if an application has been installed on an Android device while browsing a website?

Let's set the scene: I've got a website that needs to use JavaScript to determine whether my app is already installed on the android device it's currently being used on. If the app is installed, the page will display a link (with a custom ...

javascriptandroiddetect

When the document is fully loaded and processed, a script will be executed immediately following

I'm facing an issue with a modal plugin on my website. The plugin is triggered on $(document).ready, but I have another function (innerHTML) that inserts an <a> element 5-10 seconds after the page loads. This causes the modal not to work properl ...

javascriptjquery

Including a pfx certificate in an Angular $http request

My current challenge involves utilizing an external API located at https://example.com/. Upon attempting to access this API, a prompt appears requesting a certificate. Fortunately, I possess the necessary .pfx file or it may be stored in my keychain as a . ...

angularjshttpssl-certificate

Using a global variable in Vue and noticing that it does not update computed variables?

Currently, I'm in the process of developing a web application and have begun implementing authentication using firebase. Successfully setting up the login interface, my next step is to propagate this data throughout the entire app. Not utilizing Vuex ...

javascriptfirebasevue.jsfirebase-authenticationvuetify.js

Summon wicket from the non-wicket-component entity

I am currently utilizing js-lib to transform text into a rich-editor, complete with options such as "bold", "italic" and more. The RichEditor also includes an UploadImage button, for which I am able to modify the call-back function: function startUploadi ...

javajavascriptajaxwicket

How to avoid redundant data when iterating over an array with Geofire and Firebase?

Could you please review my code snippet below? var posts = PostsData.getPosts(); var postFunc = function(key) { return posts[key]; } $scope.$watch($scope.active, function() { $timeout(function() { var markers = []; for ...

angularjsloopsfirebaseqgeofire

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

javascripthtmlcsschromium

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

Footer button overrides list components due to improper implementation of vertical ion-scroll

Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues: https://i.stack.imgur.com/MnheG.png 1) The placement of the Confirm button doesn& ...

javascriptcssangularjsionic-framework

Creating a jQuery Mobile Multi-Select feature with dynamically loaded data

I'm facing an issue with integrating jQuery Mobile and AngularJS. I need a multi-select option for users to choose categories, which have parent-child relationships. The data structure is fetched asynchronously from a database. The problem is that t ...

javascriptjqueryangularjsjquery-mobile

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

javascriptandroidioscsscordova

Guide to generating a text string by utilizing the foreach loop

Is there a way to combine text strings from interfaces into a single file for display in UI? The current code is generating separate files for each interface. How can I achieve the expected result of having all interfaces in one file? Additionally, is it ...

javascriptjqueryangulartypescript

Implementing CSRF token for the current window's location

Is there a way to add a CSRF token to all instances where window.location.href is used in my Javascript code? It's not possible to override the window.location object and its properties like window.location.href. Creating a universal function to inc ...

javascriptsecuritycsrfcsrf-protectionwindow.location

What is the reason behind fullstack-angular generator utilizing Lo-Dash's merge rather than document.set?

This is the original code snippet used for updating: exports.update = function(req, res) { if(req.body._id) { delete req.body._id; } Thing.findById(req.params.id, function (err, thing) { if (err) { return handleError(res, err); } if(!thing) { ...

javascriptangularjsmongooseyeomanlodash

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...

javascripthtmlcssangularhtml-table

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

After upgrading from nextJS version 9.x.x to 12.x.x, I encountered the following error. Any assistance would be greatly appreciated. TypeError: file.endsWith is not a function at eval (webpack-internal:///./node_modules/next/dist/pages/_document.js ...

javascriptnext.js

IE encounters issues making Ajax calls when transitioning from secure HTTPS requests to insecure HTTP requests

I am currently facing an issue with my ajax CORS request. It is functioning perfectly on all browsers except for Internet Explorer. In IE, the request doesn't even attempt to go through and fails instantly without any error messages appearing in the c ...

javascriptjqueryajaxinternet-explorer

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

javascriptjqueryhtmlcss