web-dev-qa-db-fra.com

Obtenez des résultats uniques à partir d'un tableau JSON à l'aide de jQuery

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

Cela fonctionne bien, mais s'il y a 3 éléments de la catégorie "basket", la catégorie apparaîtra 3 fois.

Comment pourrais-je le faire pour qu'ils n'apparaissent qu'une fois? Je vous remercie.

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 pour 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"},
javascriptjqueryarraysjson
12
JFFF

Je ne sais pas comment votre tableau products est construit (mon exemple nécessitera peut-être quelques modifications selon vos besoins), mais vous pouvez écrire un petit morceau de code qui rassemblera d'abord vos catégories uniques dans un nouveau tableau:

var categories = [];

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

jsFiddle Demo

categories contiendra les catégories uniques dont vous avez besoin, vous pouvez l’utiliser pour construire votre code HTML à partir de cela (soyez prudent avec les ID de ces éléments li, n'oubliez pas qu’ils ne peuvent pas être dupliqués, vous pouvez leur donner un petit préfixe).

22
kapa

Comment obtenir des valeurs uniques par 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;
}

Usage

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

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

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>

Utilisez _uniq

0
Parth Raval