Sorting and grouping the list Immutable.js

Question

Given the following data structure:

var MyData = [ {"id": 1, "status": "live", dateCreated: "12:00:00 01/02/2016"}, {"id": 2, "status": "draft", dateCreated: "13:00:00 03/12/2015"}, {"id": 3, "status": "ready", dateCreated: "16:00:00 04/09/2016"}, {"id": 4, "status": "ready", dateCreated: "10:00:00 01/10/2016"}, {"id": 5, "status": "live", dateCreated: "09:00:00 05/07/2015"}, {"id": 6, "status": "draft", dateCreated: "08:00:00 11/03/2016"}, {"id": 7, "status": "ready", dateCreated: "20:00:00 12/02/2016"} ] 

I am trying to sort and group it in the following conditions:

• Grouped by Status
• Sorted by status, so the order is "live", "draft", "ready"
• Elements in each status must be ordered by date. Created, first of all, first of all.

What I still have:

 // this object will help us define our custom order as it not alphabetical const itemOrder = { 'live': 1, 'ready': 2, 'draft': 3 }; const sortByStatus = (statusA, statusB) => { if ( itemOrder[statusA] > itemOrder[statusB] ) return 1; if ( itemOrder[statusA] < itemOrder[statusB] ) return -1; return 0; }; return List(MyData) .groupBy(item => item.status) .sort( sortByStatus ) 

Ignore for a moment the fact that I have not reached the point that I can sort by date :)

The problem with the above seems to be that sortByStatus is being passed to IndexedIterable, which is a common group but not a key, so I cannot sort it by that key. I think that I probably need to use sortBy, but the Immutable.js documents are incomprehensible and have no examples by which to decide how to achieve this.

So the question is: how can I take the result of the groupBy action and sort it in user order, and also how can I guarantee that all the elements in each group are sorted by date?

Answer 1

One simple solution is to simply go to the first element of the array and get the status from there:

 var MyData = [ {"id": 1, "status": "live", dateCreated: "12:00:00 01/02/2016"}, {"id": 2, "status": "draft", dateCreated: "13:00:00 03/12/2015"}, {"id": 3, "status": "ready", dateCreated: "16:00:00 04/09/2016"}, {"id": 4, "status": "ready", dateCreated: "10:00:00 01/10/2016"}, {"id": 5, "status": "live", dateCreated: "09:00:00 05/07/2015"}, {"id": 6, "status": "draft", dateCreated: "08:00:00 11/03/2016"}, {"id": 7, "status": "ready", dateCreated: "20:00:00 12/02/2016"} ] const itemOrder = { 'live': 1, 'ready': 2, 'draft': 3 }; const sortByStatus = (statusA, statusB) => { var a = itemOrder[statusA.get(0).status]; var b = itemOrder[statusB.get(0).status]; console.log(statusA.get(0).status, a, statusB.get(0).status, b) if ( a > b ) return 1; if (a < b ) return -1; return 0; }; var result = Immutable.List(MyData) .groupBy(item => item.status) .sort( sortByStatus ); console.log(result.toJS()) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script> 

Answer 2

I think you were almost there. It is important to note that .groupBy returns a collection of lists, so when you call sorting, you need a comparator that compares two different lists, not two elements. You can do this easily by simply comparing the state of the first item in each list. After that, you want to sort each list by date, so use .map to apply changes to each list in your list, then .sortBy in this list to sort by a specific key. Assuming you are using the built-in Date type, just sorting by this field should do what you want .

 var MyData = [ {"id": 1, "status": "live", dateCreated: "12:00:00 01/02/2016"}, {"id": 2, "status": "draft", dateCreated: "13:00:00 03/12/2015"}, {"id": 3, "status": "ready", dateCreated: "16:00:00 04/09/2016"}, {"id": 4, "status": "ready", dateCreated: "10:00:00 01/10/2016"}, {"id": 5, "status": "live", dateCreated: "09:00:00 05/07/2015"}, {"id": 6, "status": "draft", dateCreated: "08:00:00 11/03/2016"}, {"id": 7, "status": "ready", dateCreated: "20:00:00 12/02/2016"} ] Immutable.fromJs(MyData) // [{id: 1, ...}, ...] .groupBy(item => item.status) // group items into lists by status // [ 'live': [ { id: 1, ... }, { id:5, ... } ], // 'draft': [ { id: 2, ... }, { id: 6, ...} ], // 'ready': [ { id: 3, ... }, { id: 4, ... }, { id: 7, ... } ] ] .sort((listA, listB) => // order these groups by status itemOrder[listA.first().status] - itemOrder[listB.first().status]) // [ 'live': [ { id: 1, ...}, ... ], // 'ready': [ { id: 3, ...}, ... ], // 'draft': [ { id: 2, ...}, ... ] ] .map(list => list.sortBy(item => item.dateCreated)); // sort the elements in each group by date // [ 'live': [ { id: 5, ... }, { id: 1, ... } ], // 'ready': [ { id: 4, ... }, { id: 3, ... }, { id: 7, ... } ], // 'draft': [ { id: 2, , ...}, { id: 6, ... } ] ]