Imagine you have 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];
And I want it to convert into 3-dimensional Array((Matrix of ROW x COLUMN)x SET by Number of Instances, like this:
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 rows and columns of the matrix are changeable. Meaning that the number of items in the rows or column may change and even the amount of items in the data set may also differ.
Could you also provide an example so that I'm able to 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>
Please provide Vue.JS compatible answers if possible as Vue.JS is very sensitive
Any help is much appreciated.
See Question&Answers more detail:
os 
