2016-09-27 62 views
6

由于数据结构如下:排序和分组的Immutable.js列表

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"} 
] 

我试图进行排序和分组成以下条件:

  1. 的状态分组
  2. 有序按照状态确定订单是“生活”,“草稿”,“准备就绪”
  3. 每个状态中的项目应按日期排序,最近排在第一位。

我到目前为止有:

// this object will help us define our custom order as it's 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) 

忽略了片刻的事实,我没有得到的地步,我可以按日期排序尚未:)

的问题以上似乎是sortByStatus正在传递IndexedIterable这是整体组,但不是它的关键,所以我不能通过该关键字排序。我认为我可能需要使用sortBy,但Immutable.js文档是不可理解的,并没有任何示例来解决如何实现这一点。

所以,问题:我怎样才能把groupBy动作的结果和排序到一个自定义的顺序,另外我怎样才能确保每个组中的所有项目都按日期排序?

+0

按日期排序的帮助,看到这样的回答: https://stackoverflow.com/questions/46936825/how-can-i-sort-an-immutablejs-list-object-on-multiple-keys – KerSplosh

回答

1

一个简单的解决方法是刚刚从那里到达该数组的第一个项目,并获得状态:

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>

0

我觉得你几乎没有。需要注意的重要一点是.groupBy正在返回一个列表集合,所以当您调用sort时,需要一个比较器来比较两个不同的列表,而不是两个项目。您只需比较每个列表中第一项的状态即可轻松完成此操作。之后,您希望按日期逐个对每个列表进行排序,因此您可以使用.map对列表中的每个列表应用更改,然后使用该列表中的.sortBy对特定的按键进行排序。假设您正在使用内置的Date类型,just sorting by that 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, ... } ] ]