ランダムでユニークな配列の文字列

Question

ランダムゲームを<li>で行うことはできません。各ゲームはユニークでなければなりません。

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>

Answer 1

は、配列からランダムにアイテムを選択し、現在のliテキストとしてそれを追加し、アレイから削除し返し、その後、配列にこれらのゲームのタイトルを置くことができます。

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>

Answer 2

あなたは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>

それとも純粋な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>

Answer 3

あなたは

Answer 4

これは、配列をランダム化し、重複を除外し、その後、（私はより容易なアクセスのためのIDを与えた）ulに新しいli要素としてゲームを追加します。

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>