Randomising array from a matrix (bidimensional array)

Question

I Currently have the following matrix

const fileName = [
  ["a01", "b01", "c01", "d01", "e01", "f01", "g01", "h01", "i01", "j01", "k01", "l01"],
  ["a02", "b02", "c02", "d02", "e02", "f02", "g02", "h02", "i02", "j02", "k02", "l02"],
  ["a03", "b03", "c03", "d03", "e03", "f03", "g03", "h03", "i03", "j03", "k03", "l03"],
  ["a04", "b04", "c04", "d04", "e04", "f04", "g04", "h04", "i04", "j04", "k04", "l04"],
  ["a05", "b05", "c05", "d05", "e05", "f05", "g05", "h05", "i05", "j05", "k05", "l05"],
  ["a06", "b06", "c06", "d06", "e06", "f06", "g06", "h06", "i06", "j06", "k06", "l06"],
  ["a07", "b07", "c07", "d07", "e07", "f07", "g07", "h07", "i07", "j07", "k07", "l07"],
  ["a08", "b08", "c08", "d08", "e08", "f08", "g08", "h08", "i08", "j08", "k08", "l08"],
  ["a09", "b09", "c09", "d09", "e09", "f09", "g09", "h09", "i09", "j09", "k09", "l09"],
  ["a10", "b10", "c10", "d10", "e10", "f10", "g10", "h10", "i10", "j10", "k10", "l10"],
  ["a11", "b11", "c11", "d11", "e11", "f11", "g11", "h11", "i11", "j11", "k11", "l11"],
  ["a12", "b12", "c12", "d12", "e12", "f12", "g12", "h12", "i12", "j12", "k12", "l12"]
];

and I create a new array with filenames from it randomising 1 item of each subarray using this function:

function randomise() {
  let sequence = fileName.map(option => {
    const random = Math.floor(Math.random() * 11);
    return option[random];
  });
  let randomSelection = sequence.map(createURL);
  function createURL(fileName) {
    return `assets/music/${fileName}.mp3`;
  }
  console.log(randomSelection);
}

So I get an array such as:

["assets/music/f01.mp3", "assets/music/f02.mp3", "assets/music/b03.mp3", "assets/music/k04.mp3", "assets/music/b05.mp3", "assets/music/f06.mp3", "assets/music/i07.mp3", "assets/music/d08.mp3", "assets/music/d09.mp3", "assets/music/g10.mp3", "assets/music/a11.mp3", "assets/music/d12.mp3"]

But I want to rearrange my matrix in this way:

const fileName = [
  ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11", "a12"],
  ["b01", "b02", "b03", "b04", "b05", "b06", "b07", "b08", "b09", "b10", "b11", "b12"],
  ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12"],
  ["d01", "d02", "d03", "d04", "d05", "d06", "d07", "d08", "d09", "d10", "d11", "d12"],
  ["e01", "e02", "e03", "e04", "e05", "e06", "e07", "e08", "e09", "e10", "e11", "e12"],
  ["f01", "f02", "f03", "f04", "f05", "f06", "f07", "f08", "f09", "f10", "f11", "f12"],
  ["g01", "g02", "g03", "g04", "g05", "g06", "g07", "g08", "g09", "g10", "g11", "g12"],
  ["h01", "h02", "h03", "h04", "h05", "h06", "h07", "h08", "h09", "h10", "h11", "h12"],
  ["i01", "i02", "i03", "i04", "i05", "i06", "i07", "i08", "i09", "i10", "i11", "i12"],
  ["j01", "j02", "j03", "j04", "j05", "j06", "j07", "j08", "j09", "j10", "j11", "j12"],
  ["k01", "k02", "k03", "k04", "k05", "k06", "k07", "k08", "k09", "k10", "k11", "k12"]
];

I need to randomly select 1 item from each of the indexes of those subarrays, so one random item ending with "1", another ending with "2", etc Could you help me please? Thanks!

What is your question? How to rearrange your array or How to get random value from 2-D array? — Rajesh Dixit
– Rajesh Dixit, Commented Feb 19, 2020 at 13:27
From what you have and what you want to get, it appears as if you need to transpose your source matrix? What does randomising term has to do with it (your desired matrix doesn't look random in any way)? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 19, 2020 at 13:28
Yes, how to get a random array the same way I got with my old matrix. — Guillermo Brachetta
– Guillermo Brachetta, Commented Feb 19, 2020 at 13:29
Does this answer your question? Transposing a 2D-array in JavaScript — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 19, 2020 at 13:30
@YevgenGorbunkov from that matrix, my second one, I want to generate a new array with 12 random items, one from each of the indexes from each subarray. So I need to create an array with 12 items with a random letter, and all numbers from 1 to 12 — Guillermo Brachetta
– Guillermo Brachetta, Commented Feb 19, 2020 at 13:31

Aaron Plocharczyk · Accepted Answer · 2020-02-21 02:13:53Z

1

If these are the actual values of the array you're using, you can just loop from 1 through 12 and stick it together with a random character from the string "abcdefghijk" using randojs' rando() function (or otherwise if you prefer).

for(var i = 1; i <= 12; i++){
  console.log("assets/music/" + rando("abcdefghijk") + (i < 10 ? "0" : "") + i + ".mp3")
}

<script src="https://randojs.com/1.0.0.js"></script>

This code uses randojs.com to simplify the randomness and make it easier to read, so if you want to use this code, make sure this is in the head tag of your html document:

<script src="https://randojs.com/1.0.0.js"></script>

To answer the second part of your question (which you posted as another answer to this question), you don't need to keep your fileName variable to construct the HTML here if you'd rather not. You can do it like this instead:

var letters = "abcdefghijk";
for(var i = 0; i < letters.length; i++){
    var musicRowID = letters.charAt(i) + "01";
    $("#music-grid").append(`<div id="music-row-${musicRowID}" class="row no-gutters"></div>`);

    for(var j = 1; j <= 12; j++){
        var columnID = letters.charAt(i) + (j < 10 ? "0" : "") + j;
        $(`#music-row-${musicRowID}`).append(`<div class="col-1"><button id="${columnID}" class="btn bar song">${columnID.toUpperCase()}</button></div>`);
    }
}

edited Feb 21, 2020 at 2:13

answered Feb 19, 2020 at 17:15

Aaron Plocharczyk

2,8602 gold badges11 silver badges17 bronze badges

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

11 Comments

Guillermo Brachetta Over a year ago

Oh this is really cool! I didn't know about randojs! This looks very elegant! Thanks so much!!

Guillermo Brachetta Over a year ago

I love your method and really want to use it, but please see my answer to my own question below. Thanks so much!!

Guillermo Brachetta Over a year ago

Aaron, this is SO beautiful! I wish I could one day come up with such an elegant way on my own! So many thanks!! Also it is so scalable like this!

Guillermo Brachetta Over a year ago

And this opens a wonderful option too! If I create a variable letters that can be used both for the randomisation and for creating the grid. Then I can allow the user to input letters and will create both a random array and a grid based on user input. That's amazing!

Aaron Plocharczyk Over a year ago

Sure! Referring to the randomise() function you have in your answer to this question, just say randomSelection[i - 1] = index; instead of randomSelection.push(index);. Also, because the index variable is more of a value than an index, you might consider renaming that variable something like value or valueAtIndex for clarity when you look back at the code later on. But that will do it! Thanks for accepting the answer. If you need more help, just let me know!

|

Guillermo Brachetta · Accepted Answer · 2020-02-21 01:20:55Z

Very beautiful Aaron! I created the array like this:

let randomSelection = new Array();

function randomise() {
  for (let i = 1; i <= 12; i++) {
    let index = `assets/music/${rando("abcdefghijkl")}${i < 10 ? "0" : ""}${i}.mp3`;
    randomSelection.push(index);
  }
}

randomise()

The only problem now is that I was using the code below to populate a grid based in my fileName variable...

fileName.forEach(row => {
  $("#music-grid").append(`<div id="music-row-${row.slice(0, 1)}" class="row no-gutters"></div>`);
  row.forEach(col => {
    $(`#music-row-${row.slice(0, 1)}`).append(
      `<div class="col-1"><button id="${col}" class="btn bar song">${col.toUpperCase()}</button></div>`
    );
  });
});

Do you reckon it is better to keep my original fileName variable in order to allow it to populate the grid?

Thanks so much!

Aaron · Accepted Answer · 2020-02-19 15:54:50Z

0

If I understood you correctly this will give you your desired output. Picking one letter for each number. Hope this helps for whatever you need it.

const fileName = [
  ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11", "a12"],
  ["b01", "b02", "b03", "b04", "b05", "b06", "b07", "b08", "b09", "b10", "b11", "b12"],
  ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12"],
  ["d01", "d02", "d03", "d04", "d05", "d06", "d07", "d08", "d09", "d10", "d11", "d12"],
  ["e01", "e02", "e03", "e04", "e05", "e06", "e07", "e08", "e09", "e10", "e11", "e12"],
  ["f01", "f02", "f03", "f04", "f05", "f06", "f07", "f08", "f09", "f10", "f11", "f12"],
  ["g01", "g02", "g03", "g04", "g05", "g06", "g07", "g08", "g09", "g10", "g11", "g12"],
  ["h01", "h02", "h03", "h04", "h05", "h06", "h07", "h08", "h09", "h10", "h11", "h12"],
  ["i01", "i02", "i03", "i04", "i05", "i06", "i07", "i08", "i09", "i10", "i11", "i12"],
  ["j01", "j02", "j03", "j04", "j05", "j06", "j07", "j08", "j09", "j10", "j11", "j12"],
  ["k01", "k02", "k03", "k04", "k05", "k06", "k07", "k08", "k09", "k10", "k11", "k12"]
];

let pickedValues = [];

for (i = 0; i <= fileName.length; i++) {
  let index = Math.floor(Math.random() * ((fileName.length - 1) - 0 + 1));
  pickedValues[i] = (fileName[index][i]);
}
console.log(pickedValues);

edited Feb 19, 2020 at 15:54

answered Feb 19, 2020 at 13:29

Aaron

1,7471 gold badge10 silver badges18 bronze badges

3 Comments

Guillermo Brachetta Over a year ago

Amazing, this is exactly it! Thanks so much!

Guillermo Brachetta Over a year ago

Hey Aaron, how do I always have the same length in the array? Currently on each run the new values accumulate

Aaron Over a year ago

Ah please check my solution again, now each index is pointed to directly so no matter how often you call the for loop only 12 values are assigned. @GuillermoBrachetta

Collectives™ on Stack Overflow

Randomising array from a matrix (bidimensional array)

3 Answers 3

11 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related