Iterate an array into a custom grid

Question

I have a gird similar with a table with columns and rows but custom created with divs and spans and I want to populate every cell with values from many arrays and is not really working :|
so this is my function that generay those arrays:

function generate(count, values) {
    return Array.apply(null, { length: count }).map(function () {
        var r = [],
            array = values.slice();
        while (array.length) {
            r.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
        }
        return r;
    });
};

var myStringArray = generate(7, [1, 2, 3, 4, 5, 6, 7]);
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  console.log(myStringArray[i]);
}

and with this I try to add each array on each row but unfortunatley is not working.

    Array.from(document.getElementsByClassName('cell')).forEach(function(e, j) {
  e.textContent = myStringArray[i];

});

fiddle:

Answer 1

I'm not sure if i understand you right but i would try this JS code.

First we have to take your 2D Array and calculate the x and y coordinates. Its the index of your cells. If you have 7 Cells in a Row and 4 Rows you have 7*4=28 Output Elements (called Cell). All the Cell's where in a long 1D array. After the 7th Element a new Row start (and after 14th and so on). The Column number is the Index (Number of Cell inside your 1D array) mod 7 (the number of elements of one Row).

Index 0 --> x = Index % 7 = 0 % 7 = 0

Index 6 --> x = Index % 7 = 6 % 7 = 6

Index 7 --> x = Index % 7 = 7 % 7 = 0

Now we need the Row number. This is also the Index but divided by 7 (the number of elements of one Row)

Index 0 --> y = Index / 7 = 0 / 7 = 0

Index 6 --> y = Index / 7 = 6 / 7 = 0.85...

Index 7 --> y = Index / 7 = 7 / 7 = 1

Index 8 --> y = Index / 7 = 8 / 7 = 1.14...

1.14 isn't a nice row number. so we have to cut of the numbers after the point with Math.floor.

And now we have the coordinates x and y. We can use them inside the 2D Array and thats it :)

Array.from(document.getElementsByClassName('cell')).forEach(function(e, j){
  //
  var y = Math.floor(j/myStringArray.length);
  var x = j%myStringArray.length;
  e.textContent = myStringArray[y][x] /*+"("+x+","+y+")"*/;
});

Edited fiddle: https://jsfiddle.net/truvh94a/6/

If it's not what you want, please post an example result.

Answer 2

A different approach to your problem with two less specific utility functions, than your generate.

//retuns an Array of nodes that match the css-selector
function $$(selector, ctx){
    if(!ctx || !ctx.querySelectorAll) ctx = document;
    return Array.from(ctx.querySelectorAll(selector));
}

//shuffles an Array in place and returns it
function shuffle(arr){
    for(var i=arr.length, j, tmp; i-->1;){
        tmp = arr[ j = 0|(Math.random() * i) ];
        arr[j] = arr[i];
        arr[i] = tmp;
    }
    return arr;
}

//forEach `.row` ...
$$('.row').forEach(function(row){
    // ... generate a shuffled sequence ...
    var values = shuffle([1,2,3,4,5,6,7]);
    //... and apply the values to the `.cell`s textContent
    $$('.cell', row).forEach(function(cell, i){
        cell.textContent = values[i];
    });
});