underscorejs採摘二維數組

Question

第一次使用下劃線，我卡住了，找不到示例。

我的數據是：

[{ 
     "store_name": "Store 1", 
     "franchisee_id": "id01", 
     "dish_menu": "Breakfast", 
     "dish_count": "17" 
    }, { 
     "store_name": "Store 1", 
     "franchisee_id": "id01", 
     "dish_menu": "Light Meals", 
     "dish_count": "7" 
    }, { 
     "store_name": "Store 1", 
     "franchisee_id": "id01", 
     "dish_menu": "Sandwiches", 
     "dish_count": "12" 
    }, { 
     "store_name": "Store 2", 
     "franchisee_id": "id02", 
     "dish_menu": "Breakfast", 
     "dish_count": "7" 
    }, 
     ............ 
] 

我設法（從這裏一些幫助）用下面的鏈接的命令來拉動明顯store_name，然後把它變成一個HTML語句我建：

var stores = _.chain(json).pluck("store_name").sort().uniq(true).value(); 
var tempHTML = ""; 

stores.forEach(function (entry) { 
    tempHTML = tempHTML + '<option value="' + entry + '">' + entry + '</option>'; 
}); 

但我試圖將franchisee_id匹配到不同store_name，基本上建立我的HTML象下面這樣：

stores.forEach(function (entry) { 
    tempHTML = tempHTML + '<option value="' + FRANCHISEE_ID + '">' + STORE_NAME + '</option>'; 
}); 

有沒有辦法以_.pluck爲franchisee_id的值使用store_name值？這兩個字段之間存在1：1的關係，所以即使得到「首次發現」franchisee_id也沒問題。謝謝！

Answer 1

你可以做這樣的事情讓你的ID /名稱對所需的順序：

var map_id_to_name = function(m, o) { 
    m[o.franchisee_id] = o.store_name; 
    return m; 
}; 
var arrayify = function(name, id) { 
    return [ name, id ]; 
}; 
var stores = _(data).chain() 
        .reduce(map_id_to_name, { }) 
        .map(arrayify) 
        .sortBy(_.first) 
        .value(); 

演示：http://jsfiddle.net/ambiguous/9xxS6/

這將會給你一個數組的數組中stores，你可以旋轉通過建立您的<option> s; stores將看起來像這樣：

[ 
    [ "Store 1", "id01" ], 
    [ "Store 2", "id02" ], 
    ... 
] 

商店名稱將在內部陣列的在所述第二的第一條目和所述特許ID。整個事情將按商店名稱排序。如果你想不區分大小寫，那麼你可以改爲.sortBy(function(a) { return a[0].toLowerCase() })。

reduce(map_id_to_name, { })使用對象自動實施唯一性（對象中的按鍵畢竟是唯一的）來收集唯一的ID /名稱對。然後map(arrayify)將Object轉換爲數組數組，以便您可以對事物進行排序。您可以使用一個對象數組，而這只是對map和sortBy調用的小改動。

Answer 2

不同的方法，從對象中提取所需的信息，然後過濾得到的陣列來獲得唯一對象：

var stores = _(data).chain() 

// convert each object to {store_name: ..., franchisee_id: ...} 
.map(function(m) { 
    return _.pick(m, "store_name", "franchisee_id"); 
}) 

//keep one of each 
//can be shortened to .uniq(_.property('franchisee_id')) 
.uniq(function(m) { 
    return m.franchisee_id; 
}) 

//sort by name 
.sortBy("store_name") 

//and get the array 
.value(); 

你最後的陣列看起來像

[ 
    {store_name: "Store 1", franchisee_id: "id01"}, 
    {store_name: "Store 2", franchisee_id: "id02"} 
] 

並演示給玩http://jsfiddle.net/mr82s/

---

並點亮TLE _.mixin魔法，你可以進一步濃縮成

_.mixin({ 
    properties: function() { 
     var args = _.toArray(arguments); 
     return function(obj) { 
      return _.pick(obj, args); 
     }; 
    } 
}); 

var stores = _(data).chain() 
.map(_.properties("store_name", "franchisee_id")) 
.uniq(_.property('franchisee_id')) 
.sortBy("store_name") 
.value() 

http://jsfiddle.net/nikoshr/mr82s/1/