up vote 2 down vote favorite
share [fb]

I have this block of code that displays the "categories" from my array into a JQuery simple list.

It works fine, but if there are 3 items from the category "basketball", the category will appear 3 times.

How could I make it so they only appear once ? Thank you.

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

Here's the code for my array :

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"},
link|improve this question
93% accept rate
feedback

2 Answers

up vote 3 down vote accepted

I don't know how your products array is built up (so my example might need some modification according to your needs), but you could write a little piece of code that will first collect your unique categories into a new array:

var categories = [];

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

jsFiddle Demo

categories will hold the unique categories you need, you can use it to build your HTML from that (be careful with the IDs of those li elements though, remember that IDs cannot be duplicate, you might give them a little prefix).

link|improve this answer
Awesome. Thanks for the help. – JFFF Jul 13 at 15:03
Doesn't seem to work.. I'll keep you posted. I edited my question with the code from my array if you have time to look into it. Thanks again. – JFFF Jul 13 at 15:16
@JFFF I loaded your example object into my code: jsFiddle Demo #2. Seems to work for me. Feel free to tweak my fiddle to get the result you expect (maybe you want to add additional values into the categories array). – bazmegakapa Jul 13 at 15:20
Great. Thanks for your help, appreciate it. Cheers. – JFFF Jul 13 at 15:21
feedback
up vote 0 down vote

I would look into whatever is populating catalog.products. Make sure this is only being populated with distinct category values. Or create another object catalog.distinctProducts

link|improve this answer
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.