使用jQuery从JSON数组中获得唯一的结果

我有这块代码显示我的数组“类别”到一个JQuery简单列表。

它运作良好，但如果有“篮球”类别的3项，该类别将出现3次。

我怎么能这样做，所以他们只出现一次？ 谢谢。

代码如下：

function loadCategories() { console.debug('About to refresh with sort type : ' + sortType); var items = []; $.each(catalog.products, function(index, value) { items.push('<li id="' + index + '">' + '<a data-identity="productId" href="./productList.page?category=' + value.category + '" >' + '<p style="margin-bottom:0px;margin-top:0px;">' + value.category + '</p></a> </li>'); } ); categoryView.html(items.join('')); categoryView.listview('refresh'); } 

这是我的数组的代码：

 var catalog = {"products": [ {"id": "10001", "name": "Mountain bike", "color": "Grey/Black", "long-desc": "12-speed, carbon mountain bike.", "description": "", "size": "20 inches", "category": "Outdoors/ Equipment rental", "sport": "Cycling", "brand": "DaVinci", "top-seller": ""}, {"id": "10002", "name": "Pro Multi Basketball", "color": "Rainbow", "long-desc": "On sale this week only! This limited edition basketball is multi-coloured, and offers pro performance. Fun and games on the court!", "description": "Limited edition basketball.", "size": "N/A", "category": "Team gear", "sport": "Basketball", "brand": "Nike", "top-seller": "x"}, 

Answer 1

我不知道你的productsarrays是如何build立起来的（所以我的例子可能需要根据你的需要做一些修改），但是你可以写一小段代码，首先将你的独特类别收集到一个新的数组中：

 var categories = []; $.each(catalog.products, function(index, value) { if ($.inArray(value.category, categories) === -1) { categories.push(value.category); } }); 

jsFiddle演示

categories将保存你需要的独特的类别，你可以用它来build立你的HTML（小心这些li元素的ID，但请记住，ID不能重复，你可能会给他们一个小前缀）。

Answer 2

如何获得独特的价值属性

 function groupBy(items,propertyName) { var result = []; $.each(items, function(index, item) { if ($.inArray(item[propertyName], result)==-1) { result.push(item[propertyName]); } }); return result; } 

用法

 var catalog = { products: [ { category: "Food & Dining"}, { category: "Techonology"}, { category: "Retail & Apparel"}, { category: "Retail & Apparel"} ]}; var categoryNames = groupBy(catalog.products, 'category'); console.log(categoryNames);