Si j'ai un tableau d'éléments, tels que,
const array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ]
Comment puis-je le mapper pour que l'écran / la page s'affiche,
1 6 11 16
2 7 12 17
3 8 13 18
4 9 14
5 10 15
J'ai pu le faire fonctionner horizontalement avec,
const chunkSize = 5;
array
.map((e, i) => {
return i % chunkSize === 0 ?
selected.slice(i, i + chunkSize)
: null;
})
.filter(e => e);
Mais je n'arrive pas à le faire fonctionner verticalement. Comment puis-je faire ceci?
15
Mike K
3 nov. 2019 à 19:02
3 réponses
Voici une version encore compacte mais lisible.
const columnize = (items, rows) => {
const toColumns = (table, item, iteration) => {
let row = iteration % rows;
table[row] = table[row] || [];
table[row].push(item);
return table;
};
return items.reduce(toColumns, []);
};
Qui serait utilisé comme:
const numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ];
console.log(columnize(numbers, 5));
https://jsfiddle.net/69fshprq/
1
Jared Farrish
3 nov. 2019 à 16:53
const array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ]
const chunkSize = 5;
let result = [];
for (let i = 0; i < chunkSize; i++) {
result[i] = [];
}
array.forEach((e,i) => {
result[i % chunkSize].push(e);
});
console.log(result);
/*
Result :
[ [ 1, 6, 11, 16 ],
[ 2, 7, 12, 17 ],
[ 3, 8, 13, 18 ],
[ 4, 9, 14 ],
[ 5, 10, 15 ] ]
*/
4
IT WeiHan
3 nov. 2019 à 16:25
Vous pouvez calculer l'indice de la ligne.
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
chunk = 5,
result = array.reduce((r, v, i) => {
(r[i % chunk] = r[i % chunk] || []).push(v);
return r;
}, []);
result.forEach(a => console.log(...a));
6
Nina Scholz
3 nov. 2019 à 16:08