Shuffle then splice help

help
1

Trying to get players from a collection, then shuffle the collection, then split the collection in two and display it on left and right sides in the view.

For some reason the two lists (blue & red) sometimes load with the same data. Is my shuffle in the wrong spot?Am i thinking about this wrong?

Any help would be appreciated. Thanks in advance.

teams(){
       // set teams to blank
       var teams = {};
       //find checked in player of game (may need to add .fectch())
       var ckPlayers = PlayersOnDeck.find( { }, { name: 1 } ).fetch();
       //shuff ckPlayers list
       var shuffle =  _.shuffle(ckPlayers);

       //get count of shuffled list
       var count =   shuffle.length;
       //set splice at half of count
       var middle = count/2;

       //splice up collection using 0 as start point and end point variable which is half (splice cuts out the array so the remainder can be used for red team)
       teams.blue = shuffle.splice(0, Math.floor(middle));
       //red is the rest of the splice
       teams.red = shuffle;

       console.log(teams.blue);
       console.log(teams.red);
       return teams;
     }

HTML

<!-- 			Team displays -->
      <div class="col-md-6" id="blueTeam">
        <h2> Blue Team </h2>
       {{#each teams.blue}}
          <div id="blue" class="pl">  {{name}}</div>
          {{/each}}
      </div>

      <div class="col-md-6" id="redTeam">
        <h2>Red Team</h2>
        {{#each teams.red}}
           <div id="red" class="pl">  {{name}}</div>
           {{/each}}
      </div>

  </div><!--end row-->

Notice that the ā€˜ggā€™ data is in blue and red list. I need them to not have any of the same data

2424Ɨ300 15.7 KB

Also my console output is showing multiple objects which it should only show two i believe

2818Ɨ558 65.6 KB

2

I think this is the classic ā€œmultiple-same-ids-in-a-pageā€ problem which seems to crop up fairly regularly. Remove your "red" and "blue" ids and make them classes:

<!-- 			Team displays -->
      <div class="col-md-6" id="blueTeam">
        <h2> Blue Team </h2>
       {{#each teams.blue}}
          <div class="blue pl">  {{name}}</div>
          {{/each}}
      </div>

      <div class="col-md-6" id="redTeam">
        <h2>Red Team</h2>
        {{#each teams.red}}
           <div class="red pl">  {{name}}</div>
           {{/each}}
      </div>

  </div><!--end row-->
3

Thanks for the response, but unfortunately that didnā€™t help. Still showing items from the blue lis in the red list and vice versa.

4

I finally got around to revisiting this and replicated your issue. With hindsight it was obvious. Hereā€™s my solution:

  {{#with all=teams}}
    <div class="col-md-6" id="blueTeam">
      <h2>Blue Team</h2>
      {{#each all.blue}}
        <div class="pl blue ">{{name}}</div>
      {{/each}}
    </div>

    <div class="col-md-6" id="redTeam">
      <h2>Red Team</h2>
      {{#each all.red}}
        <div class="pl red ">{{name}}</div>
      {{/each}}
    </div>
  {{/with}}

With the original code, the teams helper was being called on teams.blue and then again on teams.red. The result being that the list was being reshuffled between calls and so it was highly likely that names would appear in both listsā€¦ The above code ensures that the helper is only ever called once (in the with), so the shuffled list remains constant.

Iā€™d not come across before and it was good to be able to get to the bottom of it. :slight_smile:

(My original comment about id vs class still stands - itā€™s not a good idea to use the same id more than once on a page).

5

Thank you. Iā€™m going to give it a shot. Never used with before.

1 Like