Loop through object and get random item in javascript [duplicate]

Question

Suppose you have a Javascript object with some properties to display a page with background a text and a title randomly how would you loop inside it to make it display only one item on the object each time?

const list = {
            b1:{
                author: 'Mozart',
                title: 'lacrimosa',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                imageURL: 'url(./assets/img/image.jpg)'
            },
            b2:{
                author: 'Choppin',
                title: 'Waltz in A minor',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                imageURL: 'url(./assets/img/image.jpg)'
            },
            b3:{
                author: 'Bach',
                title: 'Ave Maria',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                imageURL: 'url(./assets/img/image.jpg)'
            },
        }





return(
            <div className="background" style={{background: 'url(./assets/img/image.jpg)'}}>
                <div className="caption">
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p> artist - <cite>Song</cite></p>
                    </blockquote>
                </div>
            </div>
        )

I tried the Math.random() method but it didn't work

Have a look at this question that explains how to get a random value from an object. — user3297291
– user3297291, Commented Nov 16, 2018 at 9:27
Do you have any code other than an object, like a function that uses Math.random? — zer00ne
– zer00ne, Commented Nov 16, 2018 at 9:29

Pablo Alvarez · Accepted Answer · 2018-11-16 09:46:06Z

5

I would better suggest (in order to prevent possible variations of object naming instead of b1, b2, etc.) to use the Object.keys() method:

var listKeys = Object.keys(list);
var randomIndex = Math.floor(Math.random() * listKeys.length);
var randomObject = list[listKeys[randomIndex]];

answered Nov 16, 2018 at 9:46

Pablo Alvarez

1061 silver badge7 bronze badges

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

Comments

Rolvernew · Accepted Answer · 2018-11-16 09:59:57Z

2

The use of Math.random() in David's answer is wrong : you could end up with keys[-1]! The correct way is to use Math.floor(Math.random()*length). Moreover I would use the Object.keys() method to be as general as you need, see this doc. Here is a working solution:

const list = {
  b1: {
    author: 'Mozart',
    title: 'lacrimosa',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageURL: 'url(./assets/img/image.jpg)'
  },
  b2: {
    author: 'Chopin',
    title: 'Waltz in A minor',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageURL: 'url(./assets/img/image.jpg)'
  },
  b3: {
    author: 'Bach',
    title: 'Ave Maria',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageURL: 'url(./assets/img/image.jpg)'
  },
};

const keys = Object.keys(list);
const randomIndex = keys[Math.floor(Math.random() * keys.length)];
const item = list[randomIndex];
console.log(item.author);

The Object.getOwnPropertyNames() method would also work in your specific example.

answered Nov 16, 2018 at 9:59

Rolvernew

7096 silver badges8 bronze badges

1 Comment

Aastone Over a year ago

Worked like a charm! Thank you

Nurbol Alpysbayev · Accepted Answer · 2018-11-16 09:31:54Z

0

You can get random item from the object like this

const randomItem = list['b' + Math.floor(Math.random() * 2)]

answered Nov 16, 2018 at 9:31

Nurbol Alpysbayev

22.4k6 gold badges68 silver badges100 bronze badges

Comments

Davi · Accepted Answer · 2018-11-16 09:33:47Z

0

Either convert the object to Array so you can use Math.random() or create a list of keys, choose one and use it to access the object.

Convert to Array

const arrList = Object.keys(list).map(k => list[k]);
const item = arrList[Math.round(Math.random() * arrList.length - 1)];

Use a list of keys

const keys = ['b1', 'b2', 'b3'];
const item = list[keys[Math.round(Math.random() * keys.length - 1)]];

answered Nov 16, 2018 at 9:33

Davi

4,2941 gold badge18 silver badges29 bronze badges

Comments

Maher Tliba · Accepted Answer · 2018-11-16 09:54:40Z

0

const randomItem = function (obj) {
  var keys = Object.keys(obj)
  return obj[keys[ keys.length * Math.random() << 0]];
};

answered Nov 16, 2018 at 9:54

Maher Tliba

4911 gold badge3 silver badges12 bronze badges

1 Comment

OliverRadini Over a year ago

Are you able to provide some explanation of what's happening here?

Shehara · Accepted Answer · 2018-11-16 11:09:39Z

0

You can do this with 3 simple lines of code.

//find the length of your object
const length = Object.keys(list).length

//generate a random number that's between 0 and the length of your object
const random_number = Math.floor((Math.random() * length) + 0);

//get your random item from the object
const random_item = list[Object.keys(list)[random_number]]


console.log(random_item)

Keys can be completely dynamic (b1, b2, b3 can be named as anything - eg: b1, g4, aaa)

answered Nov 16, 2018 at 11:09

Shehara

1113 bronze badges

Collectives™ on Stack Overflow

Loop through object and get random item in javascript [duplicate]

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Related