How do I retrieve a random object from an array of objects ? Javascript

Question

I have this bit of code that adds an image to the 'imageContainer'

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

I have this array of objects :

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

What I want to do is have a function that I call which adds the image to the 'imageContainer' but I want the image to be randomly picked from the 'imagesArray'. How do i randomly get one of the 3 (xbox,playStation,wii) images and then retrieve their attributes so I can use them to create the images ?

Math.random() + size of array (after jsonparsing) + use the result as index = your answer — KarelG
– KarelG, Commented Apr 28, 2015 at 21:25
try this var item = imagesArray [Math.floor(Math.random()*imagesArray .length)]; — Sushil
– Sushil, Commented Apr 28, 2015 at 21:26
use the random array thingie on Object.keys(obj), then pull that key. — dandavis
– dandavis, Commented Apr 28, 2015 at 21:26

Kostas · Accepted Answer · 2015-04-28 21:40:50Z

4

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>

edited Apr 28, 2015 at 21:40

answered Apr 28, 2015 at 21:29

Kostas

1,9031 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AJ_91 Over a year ago

great, nice and simple and with a runnable code snippet :) Thanks, will accept your answer when i can :))

Ahtesham Shah Over a year ago

@Kostas Nice, its simple way but sometimes its giving same two times I want to avoid this how I can do that

Kostas Over a year ago

@AhteshamShah I made a fiddle for not giving you the same result. jsfiddle.net/br3z1t8w/1 . The idea is to subtract the item from the array each time and return the array back when it's empty.

Transcendence · Accepted Answer · 2015-04-28 21:27:38Z

2

Generate a random number that will be the index of the image you want.

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

answered Apr 28, 2015 at 21:27

Transcendence

2,7263 gold badges22 silver badges31 bronze badges

Collectives™ on Stack Overflow

How do I retrieve a random object from an array of objects ? Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related