Random and unique array's string to list

Question

I can't get to work a random game per <li>. Each game should be unique.

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA']

<ul class="list-group"><h4>These are the games that James like the most</h4>
        <li class="james list-group-item">...</li>
        <li class="james list-group-item">...</li>
        <li class="james list-group-item">...</li>
</ul>

@BenM I made it, but it was not correct so I didn't posted it. — Paul, Feb 14 '17 at 19:11

kind user · Answer 1 · 2017-02-14T19:06:53.777

You can do something like this with jQuery.

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

var filteredArr = [...new Set(Array.from(randomGames))]

for(var i = 0; i < filteredArr.length; i++) {
  $('.list-group').append('<li class="james list-group-item">' + filteredArr[i] + '</li>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>These are the games that James like the most</h4>
<ul class="list-group">
</ul>

Or just pure JS.

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

var filteredArr = [...new Set(Array.from(randomGames))]

for(var i = 0; i < filteredArr.length; i++) {
  var node = document.createElement("li");  
  var textnode = document.createTextNode(filteredArr[i]); 
  node.appendChild(textnode);    
  document.getElementById("list-group").appendChild(node); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>These are the games that James like the most</h4>
<ul id="list-group">
</ul>

The question does not have a jQuery tag - why provide a jQuery answer? — Constantin Groß, Feb 14 '17 at 19:03
You're not removing duplicates as asked : "Each game should be unique." — topheman, Feb 14 '17 at 19:04
Argh, the code above doesn't actually randomize the elements, it just filters the duplicates out and dynamically pushes it and creates an unordered list. I just didn't understand OP fully. — kind user, Feb 14 '17 at 19:20

score 1 · Accepted Answer · answered Feb 14 '17 at 19:07

Pick random item from array, add it as current li text and remove it from array.

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA']
var li = document.querySelectorAll('li')

for(var i = 0; i < li.length; i++) {
  var n = parseInt(Math.random(randomGames.length) * randomGames.length) 
  li[i].textContent = randomGames[n]
  randomGames.splice(n, 1)
 
}

<ul class="list-group">
  <h4>These are the games that James like the most</h4>
  <li class="james list-group-item">...</li>
  <li class="james list-group-item">...</li>
  <li class="james list-group-item">...</li>
</ul>

score 1 · Answer 3 · answered Feb 14 '17 at 19:11

This will randomize the array and filter out duplicates, then add the games as new li elements to the ul (which I gave an id for easier access):

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

// randomize the array:
// (shuffle function taken from http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

randomGames = shuffle(randomGames);

// remove duplicates
randomGames.filter(function (elem, index, self) {
  return elem !== "" && index == self.indexOf(elem)
});

// add the games to the list
var gameslist = document.getElementById('gameslist');
for (var i = 0; i < randomGames.length; i++) {  
  var newLi = document.createElement('li');
  newLi.className = 'james list-group-item';
  newLi.textContent = randomGames[i];
  gameslist.appendChild(newLi);
}

<h4>These are the games that James like the most</h4>
<ul class="list-group" id="gameslist">
</ul>

Random and unique array's string to list

3 Answers3