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

Question

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

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

var categories = [];

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

jsFiddle Demo

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

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

Answer 3

var catalog={
    products : [
        { category: 'fos', name: 'retek' },
        { category: 'fos', name: 'item' },
        { category: 'nyedva', name: 'blabla' },
        { category: 'fos', name: 'gihi' },
    ]
};
console.log(_.uniq(_.map(catalog.products, 'category')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

Использование _uniq