Iterate over 4 random response from an each statement

Question

I have some data in a JSON file and there are about 20 entries. What I would like to do is display 4 of those entries, at random, each time the page loads.

var data = [
  {'name': 'Bill'},
  {'name': 'Sally'},
  {'name': 'George'},
  {'name': 'Steve'},
  {'name': 'Jill'},
  {'name': 'Jeff'}
];

$.each(data, function(i) {
  var name = data[i].name;
  // Select 4 at random
  $('.results').append('<div>' + name + '</div>');
  
  if(i === 3) {  
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="results"></div>

I was able to make it so that it only displays 4 with my conditional statement, but how could I modify this so that it selects a random 4 rather than the first 4?

1. Shuffle an array https://stackoverflow.com/q/2450954/251311 2. Pick first 4 (using `Array.prototype.slice`) — zerkms, Oct 17 '19 at 20:18
You really [don't need jQuery](https://i.stack.imgur.com/ssRUr.gif) just to randomly select some values from an array... — Patrick Roberts, Oct 17 '19 at 20:20
A fairly easy way to do this is to shuffle the array elements, and select the first 4 from there. Here is a related topic: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Steve Pak, Oct 17 '19 at 20:20
I suggest starting by selecting **one** random element from the array. — Code-Apprentice, Oct 17 '19 at 20:21
Please find the below response - var data = [ {'name': 'Bill'}, {'name': 'Sally'}, {'name': 'George'}, {'name': 'Steve'}, {'name': 'Jill'}, {'name': 'Jeff'} ]; var totalData = data.length; $.each(data, function(i) { var random = Math.floor(Math.random() * Math.floor(totalData)); var name = data[random].name; $('.results').append('
' + name + '
'); data.splice(random,1); totalData = totalData - 1; if(i === 3){ return false; } }); — user3115056, Oct 17 '19 at 20:37

Abolfazl · Answer 1 · 2019-10-17T21:13:20.677

0

You can use this piece of cod.

    var rndList=[];
    var len=data.length
      while(rndList.length<4){
      var rnd=Math.floor((Math.random() * (len-1)) + 0);
       if(rndList.indexOf(rnd)==-1)
       {
        rndList.push(rnd)
       }
      }

    $.each(rndList, function(i) {
    var idx=rndList[i];
    var name = data[idx].name;

      $('.results').append('<div>' + name + '</div>');

    });

edited Oct 17 '19 at 21:13

answered Oct 17 '19 at 20:24

Abolfazl

1,592
11
32

What happens if you select the same `rnd` twice? – zerkms Oct 17 '19 at 20:27
i modified my answer. – Abolfazl Oct 17 '19 at 20:47
What if `data.length` is 3? What if `Math.random()` returns the same value forever? – zerkms Oct 17 '19 at 20:48
appended items are based on rndList that will never have a duplicate number,because i checked for duplicated number in this code rndList.indexOf(rnd)==-1 – Abolfazl Oct 17 '19 at 20:50
Sure, but what if the original array is of length 3? Or if `Math.random()` returns the same value? – zerkms Oct 17 '19 at 20:51
while loop continues till rndList get filled with unique numbers – Abolfazl Oct 17 '19 at 20:53
1

What if the length of the original array is 3? `const data = [1,2,3];` and run your code. – zerkms Oct 17 '19 at 20:53
1

Also this implementation will never choose `rnd = len - 1` – Patrick Roberts Oct 17 '19 at 20:54
you told before '// Select 4 at random' if you want this code be more flexible check it before while loop by a variable based on your list'length. – Abolfazl Oct 17 '19 at 20:58
It's not about being flexible, but robust. PS: it was not me who asked a question, I just pointed out your code needs extra considerations. – zerkms Oct 17 '19 at 23:23

Iterate over 4 random response from an each statement

1 Answers1