Как получить случайный объект из массива объектов? Javascript

Question

У меня есть этот кусок кода, который добавляет изображение в «imageContainer»

$('.imageContainer').prepend('<img id="xboxLogo" src="images/xboxLogo.png"/>') 

У меня есть этот массив объектов:

var imagesArray = { 
    xboxLogo : { 
     id : 'xboxLogo'; 
     src: "images/xboxLogo.png";  
    }, 
    playStatLogo : { 
     id : 'playStatLogo'; 
     src: "images/playStatLogo.png"; 
    }, 
    wiiLogo : { 
     id : 'wiiLogo'; 
     src: "images/wiiLogo.png"; 
    } 
    } 

То, что я хочу сделать, это есть функция, я вызов, который добавляет изображение в «imageContainer», но я хочу, чтобы изображение было случайно выбрано из «imageArray». Как я случайно получаю одно из изображений 3 (xbox, playStation, wii), а затем извлекаю их атрибуты, чтобы использовать их для создания изображений?

Answer 1

var imagesArray = [ 
 
    { 
 
    id: 'xboxLogo', 
 
    src: "images/xboxLogo.png" 
 
    }, 
 
    { 
 
    id: 'playStatLogo', 
 
    src: "images/playStatLogo.png" 
 
    }, 
 
    { 
 
    id: 'wiiLogo', 
 
    src: "images/wiiLogo.png" 
 
    } 
 
]; 
 

 
$('button').click(function() { 
 
    var randomImage = imagesArray[Math.floor(Math.random() * imagesArray.length)]; 
 
    $('p').text(randomImage.src); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p></p> 
 

 
<button>pick random</button>

Answer 2

Создайте случайное число, которое будет индексом изображения, которое вы хотите.

var keys = Object.keys(imagesArray); 
var n = keys.length; 
var index = Math.floor(Math.random() * n); 
var randomKey = keys[index] 
var image = imagesArray[randomKey]