2016-09-27 64 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, ... } ] ]