CODEWITHSUNDEEP
jquerylistduplicatesliquid
Chris Needham
Chris Needham

Reputation: 75

Removing duplicates in liquid created list using JQuery

Long time user, first time poster.

Basically, I have a series of kiosks in different locations and using 'liquid' I have a voucher system that automatically puts all the vouchers associated with a location in a list. I'm also using this code to start a new list after every 10 entries. Then with jQuery I've added scrollers to slide between the lists. The code for this is pretty straight forward:

{% for voucher in vouchers %}
{% capture modulus %}{{ forloop.index0 | mod:10 }}{% endcapture %} 
{% if forloop.index0 != 0 %} 
{% if modulus == "0" %} 
</ul></li><li><ul class="voucherlist"> 
{% endif %}
{% endif %}
<div id="{{ voucher.meta }}" class="voucher_list">
    <li><a href="{{ 'voucher' | url_for_page : voucher.id }}">{{ voucher.meta }}</a></li>
</div>
{% endfor %}

However, some vouchers in the list appear more than once. This is because the vouchers are split into 3 categories and some can cross over. Because of there being several locations I can't add anything to the voucher such as a key or tag to stop it showing as it may want to show in another location. Plus, each one would then have to be adjusted manually and the point of this system is to be as automatic as possible. Therefore, I used some jquery which I was pretty pleased with.

<script type="text/javascript">
    $(document).ready(function () {
        $('[id]').each(function () {
            var ids = $('[id=' + this.id + ']');
            if (ids.length > 1 && ids[0] == this) {
                $(ids[1]).remove()
            }
        });
    });
</script>

From this you can tell that I used the voucher name for the div id and then the jquery removes any divs that have the same id. However, it leaves a space where it was and therefore some pages have 8 on instead of 10. Thus we arrive at my question. How do I removes duplicates in the liquid list without leaving any spaces?

I have tried to change the ".remove()" to ".hide()" but no use. I changed it to

.addClass( "duplicate" )

In hope of then adding a line in the liquid to say something like 

{% if div.class != "duplicate" %}

Therefore not using those with a div of "duplicate". Which would be nice. But I can't find the code to do it or even know if it's possible. I've tried to cover all angles here and explain everything as best as I can. I'm so so close but maybe a different perspective would work or is there an easier method? Am I even on the right track? Any ideas would be very much appreciated.

Edit: Here's an image to try explain this further. http://img683.imageshack.us/img683/6295/voucherpagehelp.jpg Also, I've added a bit more code which was being pulled from somewhere else which will help explain the scrolling system. Sorry this wasn't clear before.

Thanks in advance.

Upvotes: 4

Views: 1110

Answers (2)

Vadim Makeev
Vadim Makeev

Reputation: 135

Here’s my take on removing duplicates in Liquid:

{% assign array = 'c|c|b|b|a|a' | split: '|' %}
{% assign result = array[1] %}

{% for item in array %}
    {% unless result contains item %}
        {% capture result %}{{ result }}|{{ item }}{% endcapture %}
    {% endunless %}
{% endfor %}

{{ result | split: '|' | sort | join: ', ' }}

Upvotes: 2

tony722
tony722

Reputation: 2035

If you're going to use jQuery to build this list, I would capture the entire vouchers object into a JavaScript object using the liquid JSON filter. However my preferred way to do this would be with liquid, so as to allow browsers without JavaScript to see the content properly:

{% assign UsedIDs = '' %}
{% assign Counter = 0 %}
{% for voucher in vouchers %}
{% capture IDToCheck %},{{voucherID}},{% endcapture %}
{% unless UsedIDs contains IDToCheck %}
{% capture modulus %}{{ Counter | mod:10 }}{% endcapture %} 
{% if Counter != 0 %} 
{% if modulus == "0" %} 
</ul></li><li><ul class="voucherlist"> 
{% endif %}
{% endif %}
<div id="{{ voucher.meta }}" class="voucher_list">
    <li><a href="{{ 'voucher' | url_for_page : voucher.id }}">{{ voucher.meta }}</a></li>
</div>
{% capture UsedIDs %}{{ UsedIDs }}{{ IDToCheck }}{% endcapture %}
{% capture Counter %}{{ Counter | plus: 1 }}{% endcapture %}
{% endunless %}
{% endfor %}

Upvotes: 0

Related Questions