Sorting a parent array in AngularJS using a child array's Date field as the basis

Question

Sorting a parent array in AngularJS using a child array's Date field as the basis

I have an array of arrays of objects with the following structure:

parentArray = [
[{id:1, date:1505020200000}, {id:4, date:1505020200000 }],
[{id:2, date:1504681500000}],
[{id:3, date:1504671000000}, {id:20, date:1504671000000}]
]

Each nested array contains dates that are all the same.

I am attempting to utilize Angular's orderBy filter to sort the dates from oldest to newest, but I am uncertain about the process.

I attempted setting the dateFilter variable for orderBy filter like this:

$scope.dateFilter= arr[0][0].date 
<div ng-repeat="child in parentArray | orderBy: dateFilter">

however, it seems that something is not right.

EDIT:

Many thanks to Matthew for his assistance and guidance. With his help, I realized the solution. Utilizing array.sort was what worked best for my data structure.

$scope.results.sort(function (a, b) {
  return a[0].date - b[0].date;
});

javascript angularjs arrays sorting

Answer 1

Answer №1

To simplify an array, create a personalized filter:

(function(app){
    app.filter("simplifyArray", function() {
        return function(input) {
            var output = [];
            input.forEach(function(innerArr) {
                output = output.concat(
                    innerArr.map(function(obj) { return obj; })
                );
                return output;
            });
            return output;
        };
    });
}(angular.module("yourModule")));

Update your ng-repeat to look like this:

<div ng-repeat="child in parentArr | simplifyArray | orderBy: 'date'">

Check out the CodePen Demo here

Answer 2

To simplify an array, create a personalized filter:

(function(app){
    app.filter("simplifyArray", function() {
        return function(input) {
            var output = [];
            input.forEach(function(innerArr) {
                output = output.concat(
                    innerArr.map(function(obj) { return obj; })
                );
                return output;
            });
            return output;
        };
    });
}(angular.module("yourModule")));

Update your ng-repeat to look like this:

<div ng-repeat="child in parentArr | simplifyArray | orderBy: 'date'">

Check out the CodePen Demo here

Answer 3

Answer №2

To facilitate sorting, create a function to retrieve the value for sorting.

$scope.myDateGetter = function(item) {
    return item[0].date;
}

Next, use this function as the expression in the orderBy filter.

<div ng-repeat="child in parentArr | orderBy: myDateGetter">

Further information can be found at: https://docs.angularjs.org/api/ng/filter/orderBy

Answer 4

To facilitate sorting, create a function to retrieve the value for sorting.

$scope.myDateGetter = function(item) {
    return item[0].date;
}

Next, use this function as the expression in the orderBy filter.

<div ng-repeat="child in parentArr | orderBy: myDateGetter">

Further information can be found at: https://docs.angularjs.org/api/ng/filter/orderBy

Sorting a parent array in AngularJS using a child array's Date field as the basis

Answer №1

Answer №2

Similar questions

In TypeScript, the function is failing to retrieve the complete array value

TextGeometry failing to render

The second attempt at an AJAX call is unsuccessful

Ways to alter the color of an icon when hovering over it

The term 'undefined' does not refer to an object

Utilize the id in AngularJS to bring attention to a specific row within a table

Unleashing the Power of Json Strings

Transitioning between javascript functions

Transmit the identifier of the span tag to the URL seamlessly without the need to refresh

Vue.js: SCSS @import being overlooked

Tips on changing the name of a property within an object using JavaScript

Validation script needed for data list selection

Ways to display an SVG spinner prior to a substantial UI refresh

Modify opacity of displayed items in image list with ng-repeat

Create a generic function that retrieves a specific property from an array of objects using the select method

What could be causing the Twitter Timeline to fail to load based on a variable in a Vue.js component?

Code displayed on Facebook when sharing a website link implemented in JavaScript

Continue looping in Javascript until an empty array is identified

Switch the dropdown menu to a button if it consists of only one option

Difficulty establishing a connection between data in app.js and index.html using Ionic framework