How to iterate through input's content

Question

As you guys can see, I have two columns: Name and Tickets.
So John has 15 tickets, bob 10 and so on...

Objective: I want to make some sort of "lottery" where each person has X tickets. More tickets the more chance you have to win the prize.

I was trying to get both column separated by its class and then create some sort of "main array/object" something like this:

lottery = {
   John => 15
   Bob  => 10
   Milla => 7
}

And then I would try to pick a winner randomly... Just don't know how to do it.

Here I'm getting the inputs but I don't know how to "connect" them.

$('#sort').click(function(){

   let names = $('.names');
   let tickets = $('tickets');
   let size = Object.keys(names).length;
}

HTML Structure:

<section id="content">
      <div class="container participant">
         <div class="row">

            <div class="input-group">
               <div class="input-group-prepend">
               <span class="input-group-text">Nome & Tickets</span>
             </div>

               <input type="text" aria-label="name" class="names form-control">
               <input type="text" aria-label="tickets" class="tickets form-control">


               <div class="input-group-append">
                  <button class="addUser btn btn-outline-secondary" type="button">
                     <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
                  </button>
               </div>
            </div>

         </div>
      </div>
   </section>

https://api.jquery.com/each/ might help you – ADyson Feb 26 '19 at 17:02 — ADyson, Feb 26 '19 at 17:02

Rory McCrossan · Answer 1 · 2019-02-26T17:58:40.517

Given that each user has multiple tickets in order to have more chance of winning it would make more sense to create an array with multiple instances of their names in which you then select from randomly.

To build the array you can use map() and then fill() to populate it with the names, before randomly selecting from it, something like this:

var arr = $('#content .container .row').map(function() {
  var $row = $(this);
  return new Array(parseInt($row.find('.tickets').val(), 10)).fill($row.find('.names').val());
}).get();

var winner = arr[Math.floor(Math.random() * arr.length)];
console.log('Winner: ', winner);
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="content">
  <div class="container participant">
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="John">
        <input type="text" aria-label="tickets" class="tickets form-control" value="15">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="Bob">
        <input type="text" aria-label="tickets" class="tickets form-control" value="10">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="Milla">
        <input type="text" aria-label="tickets" class="tickets form-control" value="7">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="Kurt">
        <input type="text" aria-label="tickets" class="tickets form-control" value="3">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Thanks for the answer ! I updated with my htlm structure as I'm not using table (sorry for forget that information). I'm trying to implement your example with those inputs. — PlayHardGoPro, Feb 26 '19 at 17:28
No problem, I updated the answer to work with your HTML. You just needed to amend the initial selector, the `find()` and use `val()` instead of `text()` — Rory McCrossan, Feb 26 '19 at 17:59

How to iterate through input's content

1 Answers1