Shuffling multiple arrays in $.each()

Question

I am generating a hyperlink inside a para in the following way:

<p id="category1"></p>

jQuery Code:

$(function () {
    var link = [
        ["category1", "http://www.xyzabcxyz.com/apple", "Apple description comes here"],
        ["category2", "http://www.xyzabcxyz.com/banana", "Banana description comes here"],
        ["category3", "http://www.xyzabcxyz.com/apricots", "Apricots description comes here"],
        ["category4", "http://www.xyzabcxyz.com/peaches", "Peaches description comes here"]
    ];
    $.each(link, function (e) {
       if ($("#" + link[e][0])[0]) {
           $("#" + link[e][0]).append('<a target="_blank" href="' + link[e][1] +
                       '">' + link[e][2] + '</a>');
       }
    });
});

Demo: http://jsfiddle.net/j2g411yk/

So far so good. Everything works.

I was wondering how to change my code so that it randomnly shuffles multiple products inside a category. Something like this:

$(function () {
    var link = [
        [["category1", "http://www.xyzabcxyz.com/apple", "Apple description comes here"],
                       "http://www.xyzabcxyz.com/pineapple", "Pineapple description comes here"],
                       "http://www.xyzabcxyz.com/lemon", "Lemon description comes here"]],
        ["category2",  "http://www.xyzabcxyz.com/banana", "Banana description comes here"],
        [["category3", "http://www.xyzabcxyz.com/apricots", "Apricots description comes here"],
                       "http://www.xyzabcxyz.com/Berries", "Berries description comes here"]]
        ["category4", "http://www.xyzabcxyz.com/peaches", "Peaches description comes here"]
    ];
    $.each(link, function (e) {
       if ($("#" + link[e][0])[0]) {
           $("#" + link[e][0]).append('<a target="_blank" href="' + link[e][1] +
                       '">' + link[e][2] + '</a>');
       }
    });
});

So for one user it may show a hyperlink about Apple and for the other, it may be a hyperlink for Lemon. If the same visitor refreshes the page, a new product for the same cateogory should get displayed.

P.S: I want a random link but not to the extent where I have to use a cookie to keep a track if Visitor A has seen that link. It can be possible that the same user sees the same product twice on refresh and that's perfectly ok.

score 0 · Answer 1 · answered Sep 15 '15 at 12:48

0

You can use math.random() to get a random link from the category array, and use a cookie or localStorage to keep track of which links have already been seen.

answered Sep 15 '15 at 12:48

wwwmarty

858
4
10

I want a random link but not to the extent where I have to use a cookie to keep a track if Visitor A has seen that link. It can be possible that the same user sees the same product twice on refresh and that's perfectly ok. – CuriousDev Sep 15 '15 at 13:00
Well there you go then. Random is pretty simple. – wwwmarty Sep 15 '15 at 15:13

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Try this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type='text/javascript' src='js/jquery.min.js'></script>
</head>
<body>
    <p id="category1"></p>
    <p id="category4"></p>
    <script>
        function getRandomInt (min, max) {
            if (max == 0) return 0;
            return Math.floor(Math.random() * (max - min + 1)) + min;
        } 

        $(function () {
            var link = [
                ["category1", [[ "http://www.xyzabcxyz.com/apple", "Apple description comes here"],
                               ["http://www.xyzabcxyz.com/pineapple", "Pineapple description comes here"],
                               ["http://www.xyzabcxyz.com/lemon", "Lemon description comes here"]]],
                ["category2", [["http://www.xyzabcxyz.com/banana", "Banana description comes here"]]],
                ["category3", [["http://www.xyzabcxyz.com/apricots", "Apricots description comes here"],
                               ["http://www.xyzabcxyz.com/Berries", "Berries description comes here"]]],
                ["category4", [["http://www.xyzabcxyz.com/peaches", "Peaches description comes here"]]]
            ];
            $.each(link, function (e,v) {
                if ($("#" + v[0]).length) {
                    var min = 0; 
                    var max = (v[1].length)-1;
                    var i = getRandomInt(min,max);

                    $("#" + v[0]).append('<a target="_blank" href="' + v[1][i][0] +'">' + v[1][i][1] + '</a>');
                }
            });
        });
    </script>   
</body>

For the random function tks. to
Javascript: Generate a random number within a range using crypto.getRandomValues

Shuffling multiple arrays in $.each()

2 Answers2