Order array of objects by nested attribute

Question

I would like to be able to order an array by a nested object. I have this array containing informations about objects on a timeline I would be able to order this by the start position that is defined inside nested arrays. I can get it iterate trough the array with lines[0].events[0].start

this is the array:

timelines = [
    {
    name: 'obj1',
        data: { id : 'obj1-guid' },
        lines: [{
          events: [{
            name: 'animation1',
            data : { id : 'animation1-guid' },
            start : 100,
            duration : 200
          }]
        }],
        video_url: 'url',
    },
    {
    name: 'obj2',
        data: { id : 'obj2-guid' },
        lines: [{
          events: [{
            name: 'animation1',
            data : { id : 'animation1-guid' },
            start : 4,
            duration : 200
          }]
        }],
        video_url: 'url',
    },
    {
    name: 'obj3',
        data: { id : 'obj3-guid' },
        lines: [{
          events: [{
            name: 'animation1',
            data : { id : 'animation1-guid' },
            start : 56,
            duration : 200
          }]
        }],
        video_url: 'url',
    },

];

I tried a function like this

function sorting(json_object, key_to_sort_by) {
          function sortByKey(a, b) {
              var x = a[key_to_sort_by];
              var y = b[key_to_sort_by];
              return ((x < y) ? -1 : ((x > y) ? 1 : 0));
          }
          json_object.sort(sortByKey);
        }

 timelines = sorting(timelines, 'lines[0].events[0].start');

but of course it's not working

You should return something from your sorting function in the first place... — Redu
– Redu, Commented Apr 30, 2017 at 19:49
... and this 'lines[0].events[0].start' is not a valid key. — ibrahim mahrir
– ibrahim mahrir, Commented Apr 30, 2017 at 19:50

Egor Stambakio · Accepted Answer · 2017-04-30 19:52:21Z

1

Just a regular sort:

timelines = [
    {
    name: 'obj1',
        data: { id : 'obj1-guid' },
        lines: [{
          events: [{
            name: 'animation1',
            data : { id : 'animation1-guid' },
            start : 100,
            duration : 200
          }]
        }],
        video_url: 'url',
    },
    {
    name: 'obj2',
        data: { id : 'obj2-guid' },
        lines: [{
          events: [{
            name: 'animation1',
            data : { id : 'animation1-guid' },
            start : 4,
            duration : 200
          }]
        }],
        video_url: 'url',
    },
    {
    name: 'obj3',
        data: { id : 'obj3-guid' },
        lines: [{
          events: [{
            name: 'animation1',
            data : { id : 'animation1-guid' },
            start : 56,
            duration : 200
          }]
        }],
        video_url: 'url',
    },

];

const r = timelines.sort((a,b) => a.lines[0].events[0].start - b.lines[0].events[0].start);

console.log(r)

answered Apr 30, 2017 at 19:52

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Angus Simons Over a year ago

This works perfectly!!! thank you so much. I need to wait 3 minutes more to sign as correct answer.

eltonkamami · Accepted Answer · 2017-04-30 20:02:47Z

You can provide a custom sorting function to [].sort

For ASC sorting you can do

timelines.sort( function(a, b){ 
    return a.lines[0].events[0].start - b.lines[0].events[0].start
})

For DESC

timelines.sort( function(a, b){ 
    return b.lines[0].events[0].start - a.lines[0].events[0].start
})

You can read more about how the compare function is evaluated from MDN

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

If compareFunction(a, b) is less than 0, sort a to a lower index than b, i.e. a comes first.

If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.

If compareFunction(a, b) is greater than 0, sort b to a lower index than a.

compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined.

Collectives™ on Stack Overflow

Order array of objects by nested attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related