How to convert for loop whit array.slice in for-of or map array.slice for generate col and row?

Question

I have a problem in Angular8. I need to convert a for loop of an array into a loop of for-of or array.map .

I have this code, I pass an array of objects and I need to separate it into col and row array 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,
        },
        {
          url:'http://url3',
          name:'3v',
          active: false,
        },
        {
          url:'http://url4',
          name:'4v',
          active: false,
        },
        {
          url:'http://url5',
          name:'5v',
          active: false,
        },
        {
          url:'http://url6',
          name:'6v',
          active: false,
        },
        {
          url:'http://url7',
          name:'7v',
          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);
      }
    }
  }

my output from object whit col = 2; row = 2; :

pages --> (2) [Array(4), Array(3)]             // 2 pages
              --> (0) [{...},{...},{...},{...}] // 1st page - 4 elemet
              --> (1) [{...},{...},{...}]       // 2nd page - 3 element


grid --> (2) [Array(2), Array(2)]
            -->(0) [Array(2), Array(2)]   // page1 - 2 row
                   --> (0)[{...},]{...}]    // 2 col x row
                   --> (1)[{...},]{...}]    // 2 col x row
           --> (1) [Array(2),Array(1)]   // page 2 - 2row
                   --> (0)[{...},{...}]     // 2 col x row
                   --> (1)[{...}] .        // 1col x row

the output is correct, but tslint gives me an error on for loop:

Expected a 'for-of' loop instead of a 'for' loop with this simple iteration

ps : the rows and columns are customizable

Answer 1

This is how you can convert your loops into for-of loops:

    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,
        },
        {
          url:'http://url3',
          name:'3v',
          active: false,
        },
        {
          url:'http://url4',
          name:'4v',
          active: false,
        },
        {
          url:'http://url5',
          name:'5v',
          active: false,
        },
        {
          url:'http://url6',
          name:'6v',
          active: false,
        },
        {
          url:'http://url7',
          name:'7v',
          active: false,
        },
      ]
ngOnInit() {
    if(this.col === 0 || this.row === 0) {
      this.grid = this.items;
    }else {
      for (let item of this.items) {
         let itemIndex = this.items.indexOf(item);
         let page = this.items.slice(itemIndex , itemIndex+this.gridSize);
         this.pages.push(page);
      }
      for (let iPage of this.pages) {
        let pageUrl = [];
        let j = 0;
        for(let jPage of iPage.length) {
          let urls = iPage.slice(j , j+this.col);
          pageUrl.push(urls);
          j+=this.col;
        }
        this.grid.push(pageUrl);
      }
    }
  }