Javascript Get Random result with probability for specific array

Question

i have a array and i need to do it randomly show the output by probability below are my code

var shirts = [
                      ["images/fantastic-logo.png","12.65"],
                      ["images/fantastic-word.png","10.00"],
                      ["images/free-product.png","15.50"]
                      ];

        var pos = Math.floor((Math.random() * shirts.length) + 0);
        $("#image").html($("<img/>").attr("src", shirts[pos][0]));
        $(".price").html("$" + shirts[pos][1]);

i have do the basic math.random() to make it random show the image, now i need to make it show with probability, for example probability for showing ["images/fantastic-logo.png","12.65"] was 50%, ["images/fantastic-word.png","10.00"] was 25%, ["images/free-product.png","15.50"] was 25%.

Thanks for everybody help

What is the logic that ["images/fantastic-logo.png","12.65"] has 50% probability? — Eddie
– Eddie, Commented Mar 8, 2018 at 3:00
@Eddie sorry for my bad english, what im mean was i wanted showing the first array with 0.5 probability in random selection — Mun Kiat
– Mun Kiat, Commented Mar 8, 2018 at 3:07

Eddie · Accepted Answer · 2018-03-08 03:27:18Z

One option is add a third element which indicate the weight of probability.

In the example below fantastic-logo.png has 2 to represent 50% and the other 2 only as 1 to represent 25% each.

Then create a 4 element array [0,0,1,2] - This represent element 0 has 50% chance. element 1 has 25% chance and element 2 has 25% as well.

Make random from the newly created array and use the value as the position.

Like:

var shirts = [
  ["images/fantastic-logo.png", "12.65", 2],
  ["images/fantastic-word.png", "10.00", 1],
  ["images/free-product.png", "15.50", 1]
];

//Create a 4 element array based on probability weight
var probability = shirts.map((v, i) => Array(v[2]).fill(i)).reduce((c, v) => c.concat(v), []);

//Random select from probability array
var pos = probability[Math.floor((Math.random() * probability.length))];

$("#image").html($("<img/>").attr("src", shirts[pos][0]));
$(".price").html("$" + shirts[pos][1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image"></div>
<div class="price"></div>

Ray · Accepted Answer · 2018-03-08 03:09:08Z

0

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random */

getRandomInt(3)

If you get 0 or 1, the first image is selected. But this method is not elegant. Please refer to the link below.

Generate A Weighted Random Number

answered Mar 8, 2018 at 3:09

Ray

7774 silver badges11 bronze badges

Comments

Diogo · Accepted Answer · 2018-03-08 03:18:24Z

0

For a short array this should be enough, using getRandomInt from Mozilla Developers:

function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

var shirts = [
    ["images/fantastic-logo.png", "12.65"],
    ["images/fantastic-word.png", "10.00"],
    ["images/free-product.png", "15.50"]
];

var random = getRandomInt(100);
var selectedShirt;
if (random <= 50) {
    selectedShirt = shirts[0];
} else if (random > 50 && random < 75) {
    selectedShirt = shirts[1];
} else {
    selectedShirt = shirts[2];
}

$("#image").html($("<img/>").attr("src", shirts[selectedShirt][0]));
$(".price").html("$" + shirts[selectedShirt][1]);

Note that you can use less numbers like in Ray's answer. For a bigger array you may use a better approach.

edited Mar 8, 2018 at 3:18

answered Mar 8, 2018 at 3:10

Diogo

1711 silver badge5 bronze badges

1 Comment

Mun Kiat Over a year ago

eddie's solution was perfect for me, Thanks for your answer too, really appreciate

Collectives™ on Stack Overflow

Javascript Get Random result with probability for specific array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related