Sorting arrays in Javascript by date

I think the sorting is working, is just that the fetching of the date is asynchronous, which means that sometimes you get the dates BEFORE the sort is called, sometimes you get it after (If you click a few times you'll notice that the objects in array sometimes have the date, sometimes they don't).

Inside getBranchNames you call getCommitDate and inside it you call a HTTP GET to retrieve the date, but the JS doesn't guarantee that the callback is going to finish before the loop is done, which means you might call sort on an unfinished array.

It's not a super easy solution, because you're essentially sending an async call for each commit and hoping the GET finishes before the sort function is called.

Some possible solutions:

1. you make those Ajax calls synchronous, but you're going to block the UI until they all return
2. you switch to jQuery and wait for multiple requests to finish, an example here: stackoverflow.com/a/6558326/4186181
3. you use ES6 and things like Promise.all + the fetch API or a third party library but I think it'd be too much to learn in one go just for this example

One comment in general, you might want to consider using JavaScript's native Date type. This won't necessarily make the sorting any easier, but it may make other aspects of date handling (such as formatting them for display to the user) significantly simpler.

As far as the actual sorting, the reason it's not working is that you're trying to subtract strings for the comparison, which obviously won't work. Simply converting the code to use the native Date type as mentioned above would actually let everything work as-is right now, but there are a couple of other approaches that come to mind:

• Instead of storing the BranchModel instances in an array, store them as properties of a plain object (IOW, a mapping or dictionary in other language terms) with the keys being the date strings. You can then do something like this:

// items is the mapping you want sorted values from based on keys

let tmp = Object.keys(items) // Get a list of the keys.
tmp.sort() // Sort it.
tmp.map((i) => items[i]) // Replace each key in the list 
                         // with the corresponding value from items.
                         // After this, tmp is now an array of the values
                         // in sort order, and can be used directly.

• If you're willing to add a dependency, you can actually do this easily with Lodash using the _.sortBy() function. Code for that would look like this:

// items is the array to sort.
// This uses a shorthand form not mentioned in the Lodash documentation
// to sort by a specific named property of each element.

items = _.sortBy(items, ['_date'])

Also, one general JavaScript tip: Anything that doesn't actually depend on the DOM being safe to manipulate shouldn't be inside a window.onload handler. Put simply, there's no reason to wait to define functions or values or perform computations that don't need the page to be fully loaded until the page is fully loaded. Running those without waiting can actually help speed up load times, and anything outside of a window.onload handler is essentially certain to execute before the contents of any of the handlers because of how JavaScript actually handles events internally.