CODEWITHSUNDEEP
javascriptarraysdomrandom
Paul
Paul

Reputation: 312

Random and unique array's string to list

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>

Upvotes: 0

Views: 57

Answers (3)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

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>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122037

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>

Upvotes: 1

kind user
kind user

Reputation: 41893

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>

Upvotes: 2

Related Questions