3

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!

Guillermo Brachetta
  • 3,857
  • 3
  • 18
  • 36
  • What is your question? How to rearrange your array or How to get random value from 2-D array? – Rajesh Feb 19 '20 at 13:27
  • 1
    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 Feb 19 '20 at 13:28
  • Yes, how to get a random array the same way I got with my old matrix. – Guillermo Brachetta Feb 19 '20 at 13:29
  • Does this answer your question? [Transposing a 2D-array in JavaScript](https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript) – Yevhen Horbunkov Feb 19 '20 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 Feb 19 '20 at 13:31
  • If you are dynamically creating matrix, try: `charList.map((char) => Array.from({ length: count }, (_, i) => (char + ("00" + i).slice(-2) ) ) )` – Rajesh Feb 19 '20 at 13:32
  • I'm not dynamically creating the matrix, @Rajesh. That won't change. – Guillermo Brachetta Feb 19 '20 at 13:51
  • @Aaron, just one extra question, every time I call the function, 12 new items are pushed into the array. I need it to be fresh every time with 12 'pickedValues' regardless of how many times I run randomise(). – Guillermo Brachetta Feb 19 '20 at 14:15

3 Answers3

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>`);
    }
}
Aaron Plocharczyk
  • 2,776
  • 2
  • 7
  • 15
  • 1
    Oh this is really cool! I didn't know about randojs! This looks very elegant! Thanks so much!! – Guillermo Brachetta Feb 20 '20 at 21:25
  • I will now just need to push all of them into an array and make sure that that array always has 12 items I guess on every run of your loop. – Guillermo Brachetta Feb 20 '20 at 23:18
  • 1
    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 Feb 21 '20 at 01:21
  • No problem! I've updated my answer for you. I hope I interpreted what you need correctly. If not, let me know and I'll be happy to help out more. – Aaron Plocharczyk Feb 21 '20 at 02:15
  • 1
    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 Feb 21 '20 at 12:15
  • 1
    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! – Guillermo Brachetta Feb 21 '20 at 12:28
  • I just need a tiny bit of extra help Aaron: I need the randomise array to have always 12 elements, no matter how many times I run the randomisation. Currently each run adds 12 new random items. Could you please help me with that? – Guillermo Brachetta Feb 21 '20 at 12:53
  • 1
    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! – Aaron Plocharczyk Feb 21 '20 at 13:07
  • 1
    This is just amazing. You cannot imagine how much thankful I am for this! I will show you soon what you just allowed by making it so scalable. – Guillermo Brachetta Feb 21 '20 at 13:14
  • 1
    As promised: This is work in progress, but your solution will allow me to let the user select which pieces to randomise from, and that's amazing!!: https://gbrachetta.github.io/Musical-Dice/ – Guillermo Brachetta Feb 21 '20 at 14:20
  • Super cool! I've bookmarked it, so I'll keep up with the progress. – Aaron Plocharczyk Feb 21 '20 at 14:37
1

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!

Guillermo Brachetta
  • 3,857
  • 3
  • 18
  • 36
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);
Aaron
  • 1,600
  • 1
  • 8
  • 14