I can't seem to figure out the reason why ng-repeat is not sorting properly

I'm struggling with sorting the following HTML in reverse chronological order based on the newestComment:

<div class="list list-inset"
    ng-repeat="(threadId, thread) in messageThreads | orderBy:'thread.newestComment'"
    ng-if="thread.newestComment > messageClearTime">
    <div class="item item-divider">
        {{thread.newestComment}}
    </div>
</div>

The data (messageThreads) consists of threadIds as keys and corresponding newestComments as timestamps:

{ "5381897" : {
      "newestComment" : 1403280014,
      "title" : "asdf"
    },
  "5595015" : {
      "newestComment" : 1403192555,
      "title" : ""
    },
  "5761260" : {
      "newestComment" : 1403126044,
      "title" : ""
    },
  "5838498" : {
      "newestComment" : 1403279962,
      "title" : "Share Test"
    }
}

Despite my efforts, I can't seem to get it to sort correctly—it always appears in the original array order. Any suggestions?

javascriptangularjsangularjs-ng-repeat

Answer №1

To utilize the orderBy filter, it is imperative to apply it on arrays of objects rather than individual objects. For more information, refer to the documentation available here.

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

I'm curious if there is a showcase of an AngularJS application created with Yeoman that includes end-to-end tests and uses $httpBackend

Is there an AngularJS app example created using the yo angular generator that includes e2e tests with $httpBackend from the ngMockE2E module? Ideally, this example would have versions optimized for both continuous integration and development environments. ...

angularjsyeomanangularjs-e2eyeoman-generatorhttpbackend

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

javascripthtmlcss

The back button functionality in Android cannot be altered or overridden using JavaScript

Hey everyone, I'm currently in the process of developing a mobile application using phonegap. I'm facing an issue where I want to disable the functionality of the back button from navigating to the previous page. I simply want it to do nothing or ...

javascriptandroidhtmlcsscordova

Is jQuery Mobile Autocomplete's search feature activated after typing 3 letters?

Hello there, I am in the process of creating a website and have implemented an autocomplete field. However, I am facing an issue due to having over 1000 <li> elements within the <ul>, making it slow especially on mobile devices. I would like t ...

javascripthtmljquery-mobileautocomplete

What is preventing the information from being shown in oj when using oj[0], oj[2], and oj[x]?

This webpage was built using HTML. I incorporated javascript into it. I assigned the content of the HTML element h1 to a variable named oj using the method getElementById. In an online tutorial, it mentioned that oj should behave like an array. So, why ...

javascripthtml

The RouteChangeStart event is triggered when the index.html page is first loaded

When it comes to the route change event, my preference is for it to be triggered when the user navigates to the next page from the initial one, rather than on the initial page load itself. In this scenario, I have associated the directive "meeee" with the ...

javascripthtmlangularjs

The object's property is currently displaying as unidentifiable

Is there a way to associate an empty array with an object property so it can be accessed later using dot notation? http://jsfiddle.net/bobbyrne01/ckdfyfxp/ var AJAX_Utils_AddressBook = { contacts: null }; var contact = []; AJAX_Utils_AddressBook.con ...

javascriptarraysobject

Step-by-step guide to configuring preact-render-to-string with Express

Could someone guide me through setting up preact-render-to-string with express? Detailed instructions are here Installation for express can be found here I've gone through the provided links, but I'm unfamiliar with using node. I'm struggl ...

javascriptnode.jsexpressnpmpreact

I'm experiencing difficulty getting my code to function properly when adding or removing classes with Bootstrap Glyphicons

Recently, I decided to play around with bootstrap's glyphicons. By utilizing Jquery's addClass and removeClass functions, I tried to smoothly transition from one glyphicon to another. Here is the code snippet: var glyphOn = true; //The glyphO ...

javascriptjqueryhtmlcsstwitter-bootstrap

Design a recurring report using an endless JavaScript cycle

I am in the process of creating a brand new scheduled report and have encountered an issue. How can I incorporate a script that includes a loop to run a specific function every 10 seconds? Here's what I have so far: var count = 1; while(count > 0 ...

javascriptreportcognos

Confused about the sticky navigation, not sure what's happening here

Encountering an issue with my sticky nav. It seems like the JS is failing to apply the designated class. View it live here: Code snippet: <script> $(window).scroll(function() { var scroll = $(window).scrollTop(); nav = $('.nav-bar'). ...

javascriptjqueryhtmlcss

Providing autocomplete and suggestion functionality to HTML input

Is there a way to create an input that displays all possible values when clicked? I am able to fetch the values from my database using PHP, but in order to have a display similar to the image below, would I need to incorporate JavaScript as well? Any guida ...

phpjavascriptjqueryhtml

Sort the array based on two criteria

Here is an array of objects with mock timestamps: var firstArr = [{ id: 1, a: 2, timestemp: 111 }, { id: 2, a: 4, timestemp: 222 }, { id: 3, a: 6, timestemp: 333 }, { id: 1, a: 3, timestemp: 777 }, { id: 3, a: 5555, timestemp ...

javascriptarraysobjectjavascript-objectslodash

What is the best way to provide a different `template` if a parameter exists?

I encountered a situation where I need to handle parameters differently depending on their existence. Is there a way for me to have 2 templates and switch between them based on the requirement? My current approach doesn't seem to be working at all. ...

angularjsangular-ui-routerstate

Retrieving data from JSON attributes in a REST API response

When using the 'get' function in the 'request' node module, I am attempting to access the 'items' array in the response I receive. Despite being able to log the entire response to the console, I encounter an issue when trying ...

javascriptjsonnode.js

AngularJS module is experiencing issues with loading properly

Can someone please help me understand what the issue is? I am new to AngularJS and may have overlooked something. Below is my simple HTML code: <!DOCTYPE html> <html> <script type="text/javascript" src="angular.js"></script> ...

javascriptangularjs

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

javascripthtmlcssvue.js

The onChange event does not function properly on formatted Mui sliders

Having an issue with the Mui styled Slider. The value is not changing smoothly and it seems like the thumb of the slider is not draggable. You can see the issue reproduced here. Thank you in advance. ...

javascriptreactjsmaterial-ui

Strategies for sorting data in d3js/dimplejs visualizations

I am looking to enhance the interactivity and responsiveness of a d3js/dimplejs chart by implementing filtering based on clicks in the legends for different series. The code I tried below did not hide the series as expected, although it worked well with a ...

javascriptd3.jschartsjavascript-frameworkdimple.js

What could be causing the CSS transition to fail when the menu button is clicked?

After clicking on the menu, a class 'active' is added to both the 'div' and 'section' elements. https://i.stack.imgur.com/jbamR.png The following javascript code accomplishes the above functionality: <script> const ...

javascripthtmlcsstransition