Получите уникальные результаты из массива JSON, используя jQuery

У меня есть этот блок кода, который отображает "категории" из моего массива в простой список 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"},

Ответы

Ответ 1

Я не знаю, как ваш массив products создается (поэтому моему примеру может потребоваться некоторая модификация в соответствии с вашими потребностями), но вы можете написать небольшой фрагмент кода, который сначала соберет ваши уникальные категории в новый массив:

var categories = [];

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

jsFiddle Demo

categories будет содержать уникальные категории, которые вам нужны, вы можете использовать его для создания своего HTML-кода (будьте осторожны с идентификаторами этих элементов li, хотя помните, что идентификаторы не могут быть дублированы, вы можете дать им маленький префикс).

Ответ 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);