Push to an array only if it isn't present already

I have a few check boxes which filter products depending on what checkboxes have been selected. The filter works when the check boxes are clicked, and product ids are added to an array. As you can see both filters have some of the same ids, so if they click more than one input boxes I want to make sure the ids are only pushed into the array once. Eg. if they have input.white selected and input.greymelange selected then they clicked the filter-btn I only want repeated ids to be pushed once. Is there a way I can do this?

JQUERY

var productIds = [""];

$(document).on('click', 'a.filter-btn', function(e){

    $( ".listingTemplate" ).html("");
   if ($('input.white').is(':checked')) {
          productIds.push("4021401143741", "4021402266227");
    } 

   if ($('input.greymelange').is(':checked')) {
          productIds.push("4021401143741", "4021402266227","4021402266418", "4021401143796");
    } 
});

HTML

 <input type="checkbox" id="white" class="white" value="white" />                
 <input type="checkbox" id="greymelange" class="greymelange" value="greymelange" />
<a href="#" class="filter-btn">filter</a>

Answers


You can make use $.inArray() and $.each()

1) Keep all your new values within an array deArray. 2) Iterate this array using $.each and then find whether it is in productIds using inArray()

if ($('input.greymelange').is(':checked')) {
        var deArray = ["4021401143741", "4021402266227", "4021402266418", "4021401143796"];
        $.each(deArray, function (i, j) {
            if ($.inArray(j, productIds) == -1) {
                productIds.push(j);
            }
        });
    }

Suggestion: don't declare empty string in array.

var productIds = [""];  //considered as an string. This will affect 
                        //when you check length, now it is 1
var productIds = []; //length is 0

Finally,

var productIds = [];

$(document).on('click', 'a.filter-btn', function (e) {
    $(".listingTemplate").html("");
    if ($('input.white').is(':checked')) {
        var dArray = ["4021401143741", "4021402266227"];
        $.each(dArray, function (i, j) {
            if ($.inArray(j, productIds) == -1) {
                console.log(j)
                productIds.push(j);
            }
        })
    }

        if ($('input.greymelange').is(':checked')) {
            var deArray = ["4021401143741", "4021402266227", "4021402266418", "4021401143796"];
            $.each(deArray, function (i, j) {
                if ($.inArray(j, productIds) == -1) {
                    productIds.push(j);
                }
            })
        }
            console.log(productIds)
        });

JSFiddle


Need Your Help

Bizarre SimpleMODAL OSX actions in Foreach Loop

php javascript jquery simplemodal wordpress

I am developing on a Wordpress MU website with a PHPBB3 forum that is merged into the site. On the website there is a page that utilizes SimpleModal OSX Style Modal Dialog that queries some of the

Set width to remainder of parent - dynamic width

html css

I have 2 div inside a fixed-width container.