React Javascript - Sort array based on inner nested array value

Question

I have an array that I need to sort based on the sortPosition value for a specific rotaTypeId value.

The current rotaTypeId is 1ebe7766-4a6b-4157-a998-00ebae24d662 so the expected result would show Sally first with Joe second.

I have tried looping over the outer array and for each element, grabbing its rotaTypeAccountEmployees inner array. Then checking if the current rotaTypeId value matched up.

That is as far as I got as I wasn't sure how to return an updated/sorted array.

Here is my array:

[
    {
        "object": "accountEmployee",
        "accountEmployeeId": "c80b2d75-6091-423c-b51b-41cef265046a",
        "employee": {
            "object": "employee",
            "employeeId": "c3832cff-ac4c-4133-ad29-a00ca8fd25f6",
            "firstName": "Joe",
            "surname": "Bloggs",
            "email": "joe@bloggs.com"
        },
        "salary": 16286.40,
        "hourlyRate": 7.83,
        "weeklyContractHours": 40,
        "rotaTypeAccountEmployees": [
            {
                "object": "rotaTypeAccountEmployee",
                "rotaTypeId": "1ebe7766-4a6b-4157-a998-00ebae24d662",
                "sortPosition": 2
            },
            {
                "object": "rotaTypeAccountEmployee",
                "rotaTypeId": "01d8ec46-d1cf-49e2-b992-840dfdb03a83",
                "sortPosition": 1
            }
        ]
    },
    {
        "object": "accountEmployee",
        "accountEmployeeId": "bdde68a4-7df0-431b-b108-db5c26ca7208",
        "employee": {
            "object": "employee",
            "employeeId": "724c4c4c-978d-4f62-9345-28219153e728",
            "firstName": "Sally",
            "surname": "Bloggs",
            "email": "sally@bloggs.com"
        },
        "salary": 16286.40,
        "hourlyRate": 7.83,
        "weeklyContractHours": 40,
        "rotaTypeAccountEmployees": [
            {
                "object": "rotaTypeAccountEmployee",
                "rotaTypeId": "1ebe7766-4a6b-4157-a998-00ebae24d662",
                "sortPosition": 1
            },
            {
                "object": "rotaTypeAccountEmployee",
                "rotaTypeId": "01d8ec46-d1cf-49e2-b992-840dfdb03a83",
                "sortPosition": 2
            }
        ]
    }
]

please add: *here is my code i tried*... – Nina Scholz Jun 21 '18 at 11:42 — Nina Scholz, Jun 21 '18 at 11:42
@NinaScholz I have added what I tried. – Sean Delaney Jun 21 '18 at 12:03 — Sean Delaney, Jun 21 '18 at 12:03

score 1 · Accepted Answer · answered Jun 21 '18 at 11:43

Try following

let arr = [{"object":"accountEmployee","accountEmployeeId":"c80b2d75-6091-423c-b51b-41cef265046a","employee":{"object":"employee","employeeId":"c3832cff-ac4c-4133-ad29-a00ca8fd25f6","firstName":"Joe","surname":"Bloggs","email":"joe@bloggs.com"},"salary":16286.4,"hourlyRate":7.83,"weeklyContractHours":40,"rotaTypeAccountEmployees":[{"object":"rotaTypeAccountEmployee","rotaTypeId":"1ebe7766-4a6b-4157-a998-00ebae24d662","sortPosition":2},{"object":"rotaTypeAccountEmployee","rotaTypeId":"01d8ec46-d1cf-49e2-b992-840dfdb03a83","sortPosition":1}]},{"object":"accountEmployee","accountEmployeeId":"bdde68a4-7df0-431b-b108-db5c26ca7208","employee":{"object":"employee","employeeId":"724c4c4c-978d-4f62-9345-28219153e728","firstName":"Sally","surname":"Bloggs","email":"sally@bloggs.com"},"salary":16286.4,"hourlyRate":7.83,"weeklyContractHours":40,"rotaTypeAccountEmployees":[{"object":"rotaTypeAccountEmployee","rotaTypeId":"1ebe7766-4a6b-4157-a998-00ebae24d662","sortPosition":1},{"object":"rotaTypeAccountEmployee","rotaTypeId":"01d8ec46-d1cf-49e2-b992-840dfdb03a83","sortPosition":2}]}];
let id = "1ebe7766-4a6b-4157-a998-00ebae24d662";
arr.sort((a,b) => {
  return a.rotaTypeAccountEmployees.find(({rotaTypeId}) => id === rotaTypeId).sortPosition - b.rotaTypeAccountEmployees.find(({rotaTypeId}) => id === rotaTypeId).sortPosition
});
console.log(arr);

So this solution is very close. Seems to be sorting the `rotaTypeAccountEmployees` array instead of the outer array though? — Sean Delaney, Jun 21 '18 at 14:44
@SeanDelaney - It sorts the outer array only. Can you please re-check and come with a scenario where you find it not working? — Nikhil Aggarwal, Jun 21 '18 at 15:28
Sorry, my bad. It is working correctly. Thank you for your help. — Sean Delaney, Jun 21 '18 at 19:31
The `.find(({rotaTypeId}) => id === rotaTypeId)` was the bit I guess I needed when trying to write my own solution/before opening this question for help, so I learnt something new today! — Sean Delaney, Jun 21 '18 at 19:32

score 0 · Answer 2 · answered Jun 21 '18 at 11:46

You could use Ramda library and do it easily with function composition:

const sortByKey = '1ebe7766-4a6b-4157-a998-00ebae24d662';

const result = R.sortBy(
  R.pipe(
    R.prop('rotaTypeAccountEmployees'),
    R.filter(R.propEq('rotaTypeId', sortByKey)),
    R.path(['0', 'sortPosition']),
  ),
)(data);

score 0 · Answer 3 · answered Jun 21 '18 at 14:49

I think that Nikhil Aggarwal solution is faster and shorter but it's good to know some algorithms implementations, here a Quick Sort implementation:

var criteria = "1ebe7766-4a6b-4157-a998-00ebae24d662";

function partition(arr, low, high)
    {
        var pivot = getValue(arr[high], criteria); 
        var i = (low-1); 
        for (let j=low; j<high; j++)
        {
            if (getValue(arr[j], criteria) <= pivot)
            {
                i++;

                let temp = arr[i];
                arr[i] = arr[j];
                arr[j] = temp;
            }
        }

        var temp = arr[i+1];
        arr[i+1] = arr[high];
        arr[high] = temp;

        return i+1;
    }

    function quickSort(arr, low,high)
    {
        if (low < high)
        {
            let pi = partition(arr, low, high);
            quickSort(arr, low, pi-1);
            quickSort(arr, pi+1, high);
        }
    }

    function getValue(element, criteria){
        let value = 0;
        element.rotaTypeAccountEmployees.map(o=>{
           if(o.rotaTypeId==criteria){
            value =  o.sortPosition;   
           } 
        });
        return value;
    }


quickSort(arr,0,arr.length-1);
console.log(arr);

The advantage of this approach is that getValue() function could change to fit in many data structures. So partition() and quickSort() could remain without change.

React Javascript - Sort array based on inner nested array value

3 Answers3