Angular's ng-repeat orderBy and groupBy features are not functioning correctly for sorting

Currently, I am utilizing Angular's ng-repeat along with groupBy and orderBy. My goal is to sort by SeatNo ascendingly as in 1, 2, 8, 12 but Angular seems to be giving me 1, 12, 2, 8 instead.

Note: I am aware that SeatNo is a string and have attempted using parseInt without success.

Here is the HTML:

<tbody ng-if="::!isOnlyAllSeat" ng-repeat="(key, value) in billRaw | groupBy: 'SeatNo' | orderBy: 'SeatNo' track by key">
  <tr class="right bg-darkBlue fg-white">
    <td colspan="{{::colSpan}}"> Seat {{key==0?"ALL":key}}</td>
    <td class="right bill-col-5"><span class="label bg-white fg-black place-right">{{value.length}}</span></td>
  </tr>
  <tr ng-repeat="item in value  | orderBy: 'ClassCode' " class="fg-darkBlue">
    <td class="bill-col-1 middle">{{ item.ClassCode }}</td>
    <td class="text-left bill-col-2 middle">
      <span class="">{{ item.Name }}</span>
      <div class="note-tag-list" ng-if="item.Options">
        <div class="note-tag-item note-tag" ng-repeat="question in item.Options track by question.Question_ID">
          <div ng-repeat="option in question.Options track by option.Option_ID">
            <a href class="label info note-tag">{{ option.Option }}
              <small class="price-tag" ng-if="option.ActualPrice !== '0.00'">+{{option.ActualPrice | currency}}</small>
            </a>
          </div>
        </div>
      </div>
    </td>
    <td class="text-left bill-col-5 middle">
      <div>{{ item.ActualPrice | currency }}</div>
      <div><small ng-if="item.OptionsTotalActualPrice !== 0">+{{ item.OptionsTotalActualPrice | currency }} : Add-on </small></div>
      <div ng-if="item.DiscountAmt>0"><span class="fg-red">({{ (getDiscount(item) | currency) }})</span> : {{ ((item.ActionTypeID == 1) ? item.DiscountAmt+'% OFF':item.CodeName) }}</div>
      <div ng-if="item.ActionTypeID == 1">{{ item.CodeName }}</div>
    </td>
  </tr>
</tbody>

This is my billRaw array.

Please note that it is currently sorted by SeatNo:

[
 {"OrderItemID": "329277",
  "Name": "Mexican Tacos",
  "Delivered": "0",
  "ShortName": "MEXICAN TACOS",
  "Price": "8.0000",
  "MenuItemID": "2318",
  "SeatNo": "1",
  "SequenceNo": "37",
  "AlcoholCheck": "0",
  "OStatusID": "2",
  "Notes": "",
  "Options": [],
  "OptionsTotal": 0,
  "OptionsTotalActualPrice": 0,
  "ActualPrice": "8.00",
  "CodeID": 0,
  "DiscountAmt": 0,
  "ActionTypeID": 0,
  "CodeName": 0,
  "ReductionType": 0,
  "PayerSeq": "0",
  "PriceType_ID": "1",
  "ParentClassName": "Tacos",
  "NetPrice": 8,
  "ExtItem_ID": "J9X79NS28M1ZY",
  "ExtOrderItem_ID": null,
  "Code": null
 },
{
  "OrderItemID": "329278",
  "Name": "Mexican Tacos",
  "Delivered": "0",
  "ShortName": "MEXICAN TACOS",
  "Price": "8.0000",
  "MenuItemID": "2318",
  "SeatNo": "2",
  "SequenceNo": "38",
  "AlcoholCheck": "0",
  "OStatusID": "2",
  "Notes": "",
  "Options": [],
  "OptionsTotal": 0,
  "OptionsTotalActualPrice": 0,
  "ActualPrice": "8.00",
  "CodeID": 0,
  "DiscountAmt": 0,
  "ActionTypeID": 0,
  "CodeName": 0,
  "ReductionType": 0,
  "PayerSeq": "0",
  "PriceType_ID": "1",
  "ParentClassName": "Tacos",
  "NetPrice": 8,
  "ExtItem_ID": "J9X79NS28M1ZY",
  "ExtOrderItem_ID": null,
  "Code": null
 },
 {
  "OrderItemID": "329276",
  "Name": "Mexican Tacos",
  "Delivered": "0",
  "ShortName": "MEXICAN TACOS",
  "Price": "8.0000",
  "MenuItemID": "2318",
  "SeatNo": "8",
  "SequenceNo": "36",
  "AlcoholCheck": "0",
  "OStatusID": "2",
  "Notes": "",
  "Options": [],
  "OptionsTotal": 0,
  "OptionsTotalActualPrice": 0,
  "ActualPrice": "8.00",
  "CodeID": 0,
  "DiscountAmt": 0,
  "ActionTypeID": 0,
  "CodeName": 0,
  "ReductionType": 0,
  "PayerSeq": "0",
  "PriceType_ID": "1",
  "ParentClassName": "Tacos",
  "NetPrice": 8,
  "ExtItem_ID": "J9X79NS28M1ZY",
  "ExtOrderItem_ID": null,
  "Code": null
 },
 {
  "OrderItemID": "329275",
  "Name": "Mexican Tacos",
  "Delivered": "0",
  "ShortName": "MEXICAN TACOS",
  "Price": "8.0000",
  "MenuItemID": "2318",
  "SeatNo": "12",
  "SequenceNo": "35",
  "AlcoholCheck": "0",
  "OStatusID": "2",
  "Notes": "",
  "Options": [],
  "OptionsTotal": 0,
  "OptionsTotalActualPrice": 0,
  "ActualPrice": "8.00",
  "CodeID": 0,
  "DiscountAmt": 0,
  "ActionTypeID": 0,
  "CodeName": 0,
  "ReductionType": 0,
  "PayerSeq": "0",
  "PriceType_ID": "1",
  "ParentClassName": "Tacos",
  "NetPrice": 8,
  "ExtItem_ID": "J9X79NS28M1ZY",
  "ExtOrderItem_ID": null,
  "Code": null
 }
]

Edit

I have adjusted billRaw so that the type of SeatNo is now number, however, the issue still persists.

_.forEach($scope.billRaw, function(value,key) {
     value.SeatNo = parseInt(value.SeatNo);
});
javascriptarraysangularjsangularjs-ng-repeatangularjs-orderby

Answer №1

If you want to fix the issue, consider executing the following code snippet in the controller:

$.each(billRaw, function(i) {billRaw[i].SeatNo = parseInt(billRaw[i].SeatNo)});

By running this code, it will convert the SeatNos to numbers and resolve any errors that may occur.

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

Automatically refresh AngularJS application when there are updates in the backend

I'm looking to implement auto-refresh functionality in my app that triggers whenever there is a change on the back-end. Currently, I have a button set up to manually reload the GET request to my back-end, but I would like to find a more seamless solut ...

angularjsrestfrontendbackend

reorder the array based on reverse pass

Here is the code snippet I am currently working with: jade (html) ng-repeat="message in messageList | orderBy: [sortingByIsUnread, sortingBySentDate] javascript $scope.sortingBySentDate = function (message) () { return moment(message.sentDate). ...

angularjsangularjs-ng-repeat

Searching for the href attribute within an anchor tag using puppeteer

I'm currently attempting to locate the href attribute within an a tag using puppeteer, but so far I have not been successful with any of my methods. The specific <a class="styles__StyledLink-sc-l6elh8-0 ekTmzq Asset--anchor" href="/ ...

javascriptpuppeteer

What is the best way to display an object in ReactJS?

My Object is: https://i.sstatic.net/QsQ1X.png I need to extract data from the recette-... endpoint in base64 format const articleList = Object.keys(this.state.users).map(key => { Object( this.state.users[key].recettes).map(data => { / ...

javascriptreactjs

Tips for avoiding code breaks when working with AJAX

When it comes to programming with AJAX, I find it challenging to maintain readable and understandable code. Overview: The basic concept is simple. I use an AJAX function called getServerData to fetch data from the server. One of the arguments in this fun ...

javascriptajax

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

I am looking to extract a list of movies from an HTML file titled "movies.html". The structure of the file is as follows: <div class="movie">Content 1</div> <div class="movie">Content 2</div> <div class=" ...

javascripthtml

What is the best way to insert a chart into a div using *ngIf in Angular?

I just started using chart.js and successfully created the desired chart. However, when attempting to implement two tab buttons - one for displaying tables and the other for showing the chart - using *ngIf command, I encountered an error: Chart.js:9369 F ...

javascripthtmltypescriptchart.js

Stop unauthorized HTTP requests by limiting a web application to only communicate with specified domains

I have come up with an innovative security feature idea for browsers/web clients, but I have not been able to find any information or discussions about it. Therefore, I am seeking an answer to determine the feasibility and necessity of such a feature. Que ...

javascripthtmlnpmwebsecurity

The script is not functioning properly on the subpage

My JQuery code doesn't seem to work when I try to transfer text from selected rows in a table on a child page to the parent page using AJAX. However, if I create and set the table with its rows and cells directly in the HTML file, the JQuery code work ...

javascriptphpjqueryhtmlajax

AngularJS directive created for validation on blur

I am striving to replicate some of the features found in Angular 1.3.X for the app I am developing, with a particular focus on ensuring compatibility with IE 8. Unfortunately, this constraint means that I cannot utilize version 1.3.X. I have encountered di ...

javascriptangularjsangularjs-directive

trigger an event from a different event in Node.js

I am attempting to retrieve the list of newly connected users in admin.html client.html (client login authentication) admin.html (notify new user join) server.js app.get('/', function(req, res){ res.sendfile('client.html'); }); ap ...

javascriptnode.jsexpresssocket.io

The comparison between the shasum output of the SHELL program and the crypto results from the JS library are revealing discrepancies

I have successfully obtained the following result using Unix: shasum -a 256 test.jpg df94ac3fd72415827f345b5fa22761f57d87e99c25d5345d2e8e9f6c91ef34a3 test.jpg However, I am facing issues with getting the same result in Javascript using crypto-browserify ...

javascripthashbrowserifysha256cryptojs

loop through array and assign values to elements

Is it possible to assign the values of a, b, c to each li? Right now, with my current code, I am only able to get all c. arr = ['a','b','c']; arr.forEach(function(obj){ var x = obj; $('li').each(function () { ...

javascriptjqueryarrays

Is it possible to execute a JavaScript command before the function finishes its execution?

Is there a way to hide a button when a function starts, display some text, and then hide the text and show the button again when the function finishes? I'm struggling with this task because JavaScript doesn't output anything to the screen until ...

javascript

Unexpected behavior in React-Native when filtering array objects

I am currently working on a react-native project where I am dealing with an array object that is being fetched from the backend. Here is a snippet of the Array. { "2010":[ { "id":1243, "eventName": ...

javascriptreactjsreact-nativefiltering

The view "skills.ejs" could not be found in the views directory

Just one month into my full stack program, I am facing a challenge while trying to render index and details pages on a local server. It's been a frustrating experience so far. :) Despite all my efforts and days of troubleshooting, I can't seem t ...

javascriptnode.js

Using Javascript to invoke the map function within a separate function

I'm currently working on an Android phonegap application and I'm facing a challenge due to my lack of expertise in Javascript. The issue arises from having two functions: one initializes a map named "map" while the other is responsible for displa ...

javascriptjquerycordova

Having trouble getting Typescript code to function properly when using commonjs style require statements

I am completely new to Typescript, Node.js, and Express. Following the instructions outlined in this tutorial (https://www.digitalocean.com/community/tutorials/setting-up-a-node-project-with-typescript), I set up my project exactly as described there. The ...

javascriptnode.jstypescriptexpress

Ruby's trilateral comparison feature that performs transitive comparisons

I am looking to iteratively compare the contents of three arrays to identify any common elements: arrs = [ ["AAA", "", ""], ["", "", "CCC"], ["AAA", "BBB", "CCC"] ] The goal is to generate a matrix that illustrates the transitive comparison results. Esse ...

arraysruby

Step-by-step guide on uploading a local JSON file to Google Maps

I am in the process of creating a map for my website using the Google Maps JavaScript API. The map includes a local JSON layer that outlines a specific polygon area on the map. Everything worked perfectly when I tested it within Visual Studio, but when I t ...

javascriptjsongoogle-maps