CODEWITHSUNDEEP
javascriptreactjs
yung peso
yung peso

Reputation: 1766

How to implement random items to display for a mapping function?

I have a mapping function that iterates over an array of items. I already sliced the data to select only a small handful of data to display. However now I also want the mapping to select random items from the array.

const randomStocks = Math.floor(Math.random() * buckets.stock_count);

Here is my mapping function:

{bucket.stock_list.slice(0, 4).map((stock, index) =>
    {return(
            <Chip key={index} label={stock} />
            )}
)}

Where and how can I add my randomStocks in my mapping function while respecting the slicing of data?

Upvotes: 0

Views: 640

Answers (2)

T J
T J

Reputation: 43156

You can use following random integer generator from Math.Random():

const ITEMS_LIMIT = 4;

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

const randomStocks = getRandomInt(0, buckets.stock_count - ITEMS_LIMIT);

You can then do

{
   bucket.stock_list.slice(randomStocks, randomStocks+ ITEMS_LIMIT).map((stock, index) => {
      return <Chip key={index} label={stock} />
   })
}

Upvotes: 2

trincot
trincot

Reputation: 350147

If your array is not immensely large, then a practical solution is to first shuffle your array randomly, and then to slice as you already do.

For shuffling you can use one of the answers provided in How can I shuffle an array:

function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

So then your code can be:

{
    shuffle(Array.from(bucket.stock_list)).slice(0, 4).map((stock, index) => {
        return(
            <Chip key={index} label={stock} />
        )
    })
}

The call to Array.from is only needed if you don't want to mutate the stock list itself, and keep its original order untouched.

Upvotes: 2

Related Questions