Removing duplicate elements from array whose elements can vary

Question

I know similar questions have been asked before, but I tried every answer and nothing worked for me. I am creating my array on every click on some of buttons with class ognjen. So it looks like this:

<button type="button" name="10208823390691752,1317727711586522" value="All contacts" class="btn btn-default ognjen">All contacts</button>
<button type="button" name="10207252567926988,1294280923934896" value="Men" class="btn btn-default ognjen">Men</button>
<button type="button" name="10208823390691752,10207252567926988" value="Women" class="btn btn-default ognjen">Women</button>
<button type="button" name="1317727711586522,1294280923934896" value="Segment 1" class="btn btn-default ognjen">Segment 1</button>

So this is how I managed to make one array with values of all clicked elements:

$(document).ready(function() {

        var clickedButtons = new Array();
        var numUsers= new Array();
        $('button.ognjen').click(function() {

            var index = clickedButtons.indexOf(this.value);

            if (index === -1){
                clickedButtons.push(this.value);
                numUsers.push(this.name);//value not found so push it
                }else {
                clickedButtons.splice(index, 1);
                numUsers.splice(this.name);// value found so remove it
            }
            var tryIt=numUsers.join();
            var picker=tryIt.split(', ');
            console.log(picker);
});

So picker is now an array that may look like this, after clicking certain buttons:

["10207252567926988,1294280923934896,10208823390691752,1317727711586522,1294280923934896"]

Now, I would like to remove all duplicate elements from this array. Tried answers from these questions:

And none of them worked. I think it may be due to dynamics of making this piker array. Please help, I'm struggling whole day with this problem.

numUsers.splice(this.name); should be numUsers.splice(index, 1); — Arun P Johny
– Arun P Johny, Commented Apr 20, 2016 at 12:05
Thats an array with only 1 element (a string with many numbers), so removing duplicates is going to be hard, because there arent any. — Craicerjack
– Craicerjack, Commented Apr 20, 2016 at 12:06
@ Arun P Johny when I click on All contacts and Women afterwards, its not making one string, but two instead in your fiddle. Can you fix that and everything will work fine I think? — Ognj3n
– Ognj3n, Commented Apr 20, 2016 at 12:18

Arun P Johny · Accepted Answer · 2016-04-20 12:29:28Z

1

I think an easier approach will be store the clicked state of each button then recreate the array each time like

$(document).ready(function() {

  var clickedButtons = new Array();
  var numUsers = new Array();
  var $btns = $('button.ognjen').click(function() {
    $(this).toggleClass('selected');

    clickedButtons = new Array();
    $btns.filter('.selected').each(function() {
      var values = this.value.split(',');
      values.forEach(function(value) {
        var index = clickedButtons.indexOf(value);
        if (index === -1) {
          clickedButtons.push(value);
        }
      });
    });

    console.log(clickedButtons)
    snippet.log(clickedButtons.join() || 'NONE');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<button type="button" value="10208823390691752,1317727711586522" class="btn btn-default ognjen">All contacts</button>
<button type="button" value="10207252567926988,1294280923934896" class="btn btn-default ognjen">Men</button>
<button type="button" value="10208823390691752,10207252567926988" class="btn btn-default ognjen">Women</button>
<button type="button" value="1317727711586522,1294280923934896" class="btn btn-default ognjen">Segment So

answered Apr 20, 2016 at 12:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ognj3n Over a year ago

Do you have any link to documentation of this snippet.js file? I'm just trying to understand better how you managed to achieve this.

Arun P Johny Over a year ago

@Ognj3n it is a small utility written by TJ meta.stackexchange.com/a/242144/134069

Collectives™ on Stack Overflow

Removing duplicate elements from array whose elements can vary

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related