Nhận kết quả duy nhất từ ​​mảng JSON bằng cách sử dụng jQuery

Question

Tôi có khối mã này hiển thị "danh mục" từ mảng của tôi vào danh sách đơn giản JQuery.

Nó hoạt động tốt, nhưng nếu có 3 mục từ danh mục "bóng rổ", danh mục sẽ xuất hiện 3 lần.

Tôi làm cách nào để làm cho nó chỉ xuất hiện một lần? Cảm ơn bạn.

Dưới đây là các mã:

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'); 
} 

Dưới đây là các mã cho mảng của tôi:

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

Tôi không biết làm thế nào mảng products bạn được xây dựng lên (như vậy ví dụ của tôi có thể cần một số điều chỉnh theo theo nhu cầu của bạn), nhưng bạn có thể viết một đoạn mã nhỏ đầu tiên sẽ thu thập các danh mục duy nhất của bạn vào một mảng mới:

var categories = []; 

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

jsFiddle Demo

categories sẽ tổ chức các hạng mục duy nhất mà bạn cần, bạn có thể sử dụng nó để xây dựng HTML của bạn từ đó (hãy cẩn thận với các ID của những li yếu tố tuy nhiên, hãy nhớ rằng ID không thể trùng lặp, bạn có thể cung cấp cho họ một tiền tố nhỏ).

Answer 2

Làm thế nào để có được giá trị duy nhất của tài sản

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

Cách sử dụng

var catalog = { products: [ 
    { category: "Food & Dining"}, 
    { category: "Techonology"}, 
    { category: "Retail & Apparel"}, 
    { category: "Retail & Apparel"} 
]}; 

var categoryNames = groupBy(catalog.products, 'category'); 
console.log(categoryNames);