根据 Javascript 中的内部数组对外部 object 进行排序

Question

I need to render a cards based on a array of objects from the API response, which look like this (simplified):

[
{
    name: 'John',
    vouchers: [
        {
            voucherId: 1,
            issuedAt: '2020-12-15T16:26:36.3548091+01:00'
        },
        {
            voucherId: 2,
            issuedAt: '2020-12-15T16:26:36.3548091+01:00'
        },
    ]
},
{
    name: 'Lisa',
    vouchers: [
        {
            voucherId: 1,
            issuedAt: '2020-12-13T16:26:36.3548091+01:00'
        }
    ]
}]

Now I want to NgFor over this array of objects (with in it an array of objects) and sort (the outer object) based on the 'issuedAt' date.

note: the issuedAt date for the array of vouchers is always the same for each user.

I was thinking of some combination of using.map =>.sort => Number(new Date(DATE_HERE)), but couldn't get it to work

Answer 1

If you want the person with the most-recent time to be listed first, get the max issue date for all vouchers and subtract them.

Note: I changed the hours so that sorting actually works.

 const result = [{ name: 'John', vouchers: [{ voucherId: 1, issuedAt: '2020-12-15T16:26:36.3548091+01:00' }, { voucherId: 2, issuedAt: '2020-12-15T17:26:36.3548091+01:00' }, ] }, { name: 'John', vouchers: [{ voucherId: 1, issuedAt: '2020-12-13T18:26:36.3548091+01:00' }] }]; const sorted = result.sort( ({ vouchers: a = [] }, { vouchers: b = [] }) => Math.max(...a.map(({ issuedAt: d = 0 }) => new Date(d))) - Math.max(...b.map(({ issuedAt: d = 0 }) => new Date(d))) ); console.log(sorted);

 .as-console-wrapper { top: 0; max-height: 100%;important; }

Answer 2

Given that the array of vouchers all have the same issuedAt property, you should be able to do this just using the first entry:

 const data = [{name: 'John', vouchers: [{voucherId: 1, issuedAt: '2020-12-15T16:26:36.3548091+01:00'}, {voucherId: 2, issuedAt: '2020-12-15T16:26:36.3548091+01:00'}]}, {name: 'Lisa', vouchers: [{voucherId: 1, issuedAt: '2020-12-13T16:26:36.3548091+01:00'}]}] const sorter = ({vouchers: [{issuedAt: x}]}, {vouchers: [{issuedAt: y}]}) => x < y? -1: x > y? 1: 0 console.log ([...data].sort (sorter))

We use [...data] as a cheap shallow clone; I prefer not to mutate input data. But you could just call data.sort (sorter) if you actually want to mutate your array.

Answer 3

used Date.parse() to get milliseconds from date string

 let data = [{ name: 'John', vouchers: [{ voucherId: 1, issuedAt: '2020-12-15T16:26:36.3548091+01:00', }, { voucherId: 2, issuedAt: '2020-12-15T16:26:36.3548091+01:00', }, ], }, { name: 'Lisa', vouchers: [{ voucherId: 1, issuedAt: '2020-12-13T16:26:36.3548091+01:00', }, ], }, ]; data.sort(function(a, b) { return ( Date.parse(a['vouchers'][0]['issuedAt']) - Date.parse(b['vouchers'][0]['issuedAt']) ); }); console.log(data)