Experiencing an issue with Angular8. Seeking help to convert a for loop for an array into a loop utilizing either for-of or array.map.
The code in question involves passing an array of objects and the need to separate it into col and row arrays for visualization.
private pages = [];
public grid = [];
public col = 2;
public row = 2;
public indexPage = 0;
private gridSize = this.col * this.row;
private items = [
{
url:'http://url1',
name:'1',
active: false,
},
{
url:'http://url2',
name:'2',
active: false,
},
...
]
ngOnInit() {
if(this.col === 0 || this.row === 0) {
this.grid = this.items;
}else {
for (let i = 0; i < this.items.length; i+= this.gridSize) {
let page = this.items.slice(i , i+this.gridSize);
this.pages.push(page);
}
for (let i = 0; i < this.pages.length; i++) {
let pageUrl = [];
for(let j = 0; j < this.pages[i].length; j+=this.col) {
let urls = this.pages[i].slice(j , j+this.col);
pageUrl.push(urls);
}
this.grid.push(pageUrl);
}
}
}
Output from object with col = 2; row = 2:
pages --> (2) [Array(4), Array(3)]
--> (0) [{...},{...},{...},{...}]
--> (1) [{...},{...},{...}]
grid --> (2) [Array(2), Array(2)]
-->(0) [Array(2), Array(2)]
--> (0)[{...},]{...}]
--> (1)[{...},]{...}]
--> (1) [Array(2),Array(1)]
--> (0)[{...},{...}]
--> (1)[{...}] .
Although output is accurate, there's a tslint error on the for loop:
Expected a 'for-of' loop instead of a 'for' loop with this simple iteration
Note: The rows and columns are customizable