Consider an array:
listItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13 ,14 ,15 ,16, 17, 18, 19, 20, 21, 22, 23];
I would like to transform it into a 3-dimensional Array((Matrix of ROW x COLUMN)x SET according to the number of instances. Here is an example:
Example: 3 Rows and 3 Columns = 1 Set
--GENERATED GRIDS--
A = [[1, 2, 3], [4, 5, 6],[7, 8, 9];
B = [[10, 11, 12], [13, 14, 15], [16, 17, 18]];
C = [[19, 20, 21], [22,23]]
Note that the rows and columns of the matrix are flexible. This means that the number of items in each row or column may vary, as well as the quantity of items in the data set.
Could you please provide an example to help achieve the expected results below?
EXPECTED RESULT: (GENERATED TABLE includes html structure):
<HTML>
<CONTAINER>
//A SET
<div class "set">
ROW 1: <row><div class "items"> 1 </div><div class "items"> 2</div><div class "items"> 3</div></row>
ROW 2: <row><div class "items"> 4</div><div class "items"> 5</div><div class "items"> 6</div><row>
ROW 3: <row><div class "items"> 7</div><div class "items"> 8</div><div class "items"> 9</div></row>
</div>
</div>
//B SET
<div class "set">
ROW 1: <row><div class "items"> 10</div><div class "items"> 11</div><div class "items"> 12</div></row>
ROW 2: <row><div class "items"> 13</div><div class "items"> 14</div><div class "items"> 15</div><row>
ROW 3: <row><div class "items"> 16</div><div class "items"> 17</div><div class "items"> 18</div></row>
</div>
</div>
//C Set
<div class "set">
ROW 1: <row><div class "items"> 19</div><div class "items"> 20</div><div class "items"> 21</div></row>
ROW 2: <row><div class "items"> 22</div><div class "items"> 23</div></row>
</div>
</div>
</CONTAINER>
</HTML>
Answer Format Template:
<template>
<container>
<LOOP THROUGH ALL SETS>
<div class ="set">
<SOME CODE LOOP THROUGH MATRIX 1 - ROW and COLUMN>
</div>
<div class ="set">
<SOME CODE LOOP THROUGH MATRIX 2 - ROW and COLUMN>
</div>
<div class ="set">
<SOME CODE LOOP THROUGH MATRIX 3 - ROW and COLUMN>
</div>
...
...
<END LOOP THROUGH ALL SETS>
<container>
</template>
<script>
export default {
components: {
},
computed: {
<SOME CODE USE TO PROCESS ARRAY INTO N x N x N... >
},
data () {
return {
itemPerCol:3,
itemsPerRow: 3,
listItems:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13 ,14 ,15 ,16, 17, 18, 19, 20, 21, 22, 23],
</script>
<style>
</style>
If possible, kindly provide Vue.JS compatible solutions as Vue.JS can be quite sensitive
Your assistance is greatly appreciated.