Obtenez des résultats uniques à partir du tableau JSON en utilisant jQuery

J'ai ce bloc de code qui affiche les "catégories" de mon tableau en JQuery simple liste.

Il fonctionne très bien, mais si il y a 3 articles dans la catégorie "basket-ball", la catégorie apparaît 3 fois.

Comment pourrais-je faire en sorte qu'ils n'apparaissent qu'une fois ? Merci.

Voici le code :

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

Voici le code de mon tableau :

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"},

source d'informationauteur JFFF

  1. 22

    Je ne sais pas comment votre products tableau est construit (si mon exemple peut subir des modifications en fonction de vos besoins), mais vous pouvez écrire un petit morceau de code qui va d'abord recueillir votre unique catégories dans un nouveau tableau:

    var categories = [];

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

    jsFiddle Démo

    categories tiendra l'unique catégories dont vous avez besoin, vous pouvez l'utiliser pour construire votre code HTML à partir de ce (être prudent avec les Id de ces li éléments si, rappelez-vous que les Id ne peut pas être en double, vous pourriez leur donner un peu de préfixe).

  2. 3

    Comment obtenir les valeurs uniques d'une propriété

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

    Utilisation

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

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