Reordering elements in ng-repeat using Angular's orderBy filter for ascending sorting

My JSON data looks like this:

"db" : {
    "x" : {
        "0" : "A",
        "1" : "B",
        "2" : "C",
        "3" : "D",
        "4" : "E",
        "5" : "F",
        "6" : "G",
        "7" : "H",
        "8" : "I",
        "9" : "J",
        "10" : "K",
        "11" : "L",
        "12" : "M",
        "13" : "N"
    }

Within the controller, I have the following code:

$scope.object = currentObject.get();
$scope.x = $scope.object.db.x;

(currentObject.get() is a custom function that retrieves data from the database, and the JSON structure matches the one mentioned above)

In the view section, I use ng-repeat as shown below:

<div ng-repeat="y in x">{{y}}</div>

I expected the output to display each value sequentially:

<div>A</div>
<div>B</div>
<div>C</div>
etc. etc.

However, the actual result shows discrepancies in the order of values displayed:

<div>A</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>B</div>
etc. etc.

To address this issue, how can I utilize the orderBy filter within ng-repeat?

Answer â„–1

Unfortunately, I am unable to provide additional input to @charlietfl's answer at this time. However, there is a relevant issue related to ngRepeat's ability to order by an object's key: https://github.com/angular/angular.js/issues/8458

Using an array is definitely the recommended approach, unless the keys in your data correspond to the values' IDs. Even then, you would still require an array structured as follows;

var x = [
    { id: 0, value: 'A' },
    { id: 1, value: 'B' },
    { id: 2, value: 'C' },
    etc...
]

Subsequently, you could implement:

<div ng-repeat="obj in x | orderBy: 'id'">{{ obj.value }}</div>

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

Node.js encountering issue with printing an array

Here is the code snippet from my routes file: router.get('/chkjson', function(req, res, next) { req.getConnection(function(err,connection){ var ItemArray = []; var myset = []; var query = connection.query('SELEC ...

What is the best way to prevent multiple Material UI cards from expanding simultaneously?

I currently have a dilemma with my Material UI expandable cards. Although everything is functioning correctly, both cards expand simultaneously, which is not the desired behavior. This is how my configuration file is structured: module.exports = { featu ...

What is preventing jQuery UI from detecting jQuery?

I have successfully created a JavaScript widget that is capable of being embedded on any third-party website, in any environment. The widget relies on jQuery and jQuery UI for its functionality. After following the guidelines outlined in How to embed Javas ...

Refresh the angular list filter by clicking on it

I'm struggling with updating an Angular list after the filter is changed. Below is the HTML code I am using: <li ng-repeat="items in list | filter:filterList" style="list-style-type:none"> {{items}} </li> Additionally, here is the o ...

Issue with Material-UI Slider not updating the color of the active range

I am currently working on a Range Slider component that ranges from zero to ten. The issue I am facing is that the values inside the range are not getting colored as expected. Here is My Custom Slider Component: export function VoteRange({ voteRange, set ...

Calculating the duration of time using JQuery with provided start and end times

I am currently utilizing a jQuery time picker to gather start and end times in a 12hr format. My goal is to calculate the time duration between the start and end times in HH:MM:SS format. The code snippet I have below is providing me with a duration like ...

What is the process for retrieving external JSON using PHP with a content-type of text/plain?

I am attempting to retrieve an external JSON response using my PHP backend. However, I am encountering an issue where the external endpoint is returned with the Content-Type: text/plain;charset=utf-8, resulting in unreadable content. string 'ï¿½ï¿½ï¿ ...

Ways to incorporate a custom JavaScript function that is activated by an external server system?

I'm currently exploring a JavaScript widget that needs to operate within specific constraints: The widget initiates a request to a third-party server using a callback URL The third-party server pings the callback URL after a set period, triggering a ...

Can you demonstrate how to convert a string date array into a JavaScript array?

I am facing a challenge where I need to convert a string representation of an array into a JavaScript array for the purpose of looping. The string in question is enclosed within single quotes. Inside my JavaScript code, I have the following: var length1 ...

Angular controller fails to fetch scope variable in subsequent view

I'm currently working on implementing a login feature that directs a validated user to a personalized HTML view that greets them with their name. The initial view is a login page. When the user clicks the "Log In" button, the ng-click function is sup ...

The result of JWT.decode may be null

I am facing an issue with decoding a JSON web token as it is returning null. I have even tried setting complete set to true, but unfortunately it still fails. The function used for generating the token is: import jwt from 'jsonwebtoken'; jwt.s ...

Guide on displaying various messages without using pop-ups when different options are chosen. Using JavaScript

In order to display different messages on the page based on the selected combinations, I have already created a demo. You can check it out here: http://jsfiddle.net/uDJd8/ <html> <head> <meta content="text/html; charset=ISO-8859-1" http ...

Supabase Type Generation Not Working as Expected

Every time I try to update my typing through the cli command, I keep getting this error message without much information for me to troubleshoot. 2023/03/01 09:34:01 Recv First Byte Error: failed to retrieve generated types: {"message":"Forbi ...

Issues persist with AJAX call to servlet

Recently, I encountered an issue with my servlet when attempting to insert form input fields into the database. The servlet was working fine when utilizing the following code: <form action="CreateUserServlet"> However, upon implementing some form v ...

Why am I receiving the error message 'Uncaught TypeError: results is not a function' while utilizing the map function?

Struggling to grasp the concept of the map function and puzzled by why my output is showing [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], even though I've provided the correct this value as per the documenta ...

Creating a specialized Angular directive for handling input of positive numbers

I am working on an application that requires a text field to only accept positive integers (no decimals, no negatives). The user should be restricted to entering values between 1 and 9999. <input type="text" min="0" max="99" number-mask=""> While s ...

Model updating with the addition of an item and triggering a secondary ng-repeat for refreshing

As I was working on the phone tutorial, I found myself pondering how to implement a specific use case. The browser renders a list of phones. When the user clicks on add phone for one of these phones, the function addItem is triggered and adds that phone ...

What is the best way to join together the deserialized QnAResponse string instead of using a {filename}?

Within this documentation, there is a demonstration of the QnA Maker service executing REST calls and parsing JSON responses - Step 3: How to link Luis with QnA The specific module section I am referring to looks like this: /* START - QnA Maker Response ...

Utilizing Java Stream to transform data from multiple attributes

I am currently working with Optional<ObjectNode> and using streams to extract various attributes from it. class MyCompany { private Age age; private Name name; // getters and setters } myJSON .map(jsonObj -> ...

Issue with Keypress Event not Functioning with Image Control in Asp.Net

Struggling to capture key press events on an image control in asp.net. The code I've tried doesn't seem to be working. Here's what I have: <head runat="server"> <title></title> <script type="text/javascript" language="j ...