How to create html rows and cols

Question

How to make only three rows with three elements in each from array with coordinates. So far I'm making duplicated rows whit elements

let container = document.querySelector('.container');
let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];
function drawHtml(){    
    arr.forEach(cell => {       
        container.innerHTML += `
            <div class="row row-${cell.i}">
                <div class="cell-row cell-${cell.j}">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
            </div>`
    }); 
}
drawHtml()

the end result should be like this

    <div class="container">
            <div class="row row-0">
                <div class="cell-row cell-0">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                <div class="cell-row cell-1">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                ...
            </div>
            <div class="row row-1">
                <div class="cell-row cell-0">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                <div class="cell-row cell-1">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                ....
            </div>
            ....
            </div>
    </div>

score 1 · Accepted Answer · answered Apr 11 '20 at 11:03

Can you try the below code

<div id="pContainer" class="container"></div>    
<script>

    let container = document.querySelector('.container');
    let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];
    function drawHtml(){    
    var innerHTML='';
    var i=0,tmp=0;
    innerHTML+='<div class="row row-0">';
    arr.forEach(cell => {       
        i = parseInt(cell.i);
        if(tmp != i)
            innerHTML+='</div><div class="row row-'+cell.i+'">';
        innerHTML+='<div class="cell-row cell-'+cell.j+'">';
        innerHTML+='<img src="https://via.placeholder.com/100" alt="">';
        innerHTML+='</div>';
        
        tmp = i;
    }); 
    innerHTML+='</div>';
    container.innerHTML = innerHTML;
    }
    drawHtml()    
</script>

score 0 · Answer 2 · answered Apr 11 '20 at 11:02

You can create a temporaty array to store i properties as the object id while looping:

let container = document.querySelector('.container');

let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, 
           {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, 
           {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];
           
function drawHtml(){    
    var temp = [];
    arr.forEach(cell => {
        if (temp.indexOf(cell.i) === -1) {
          temp.push(cell.i);
          
          container.innerHTML += `
            <div class="row row-${cell.i}">
                <div class="cell-row cell-${cell.j}">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
            </div>
          `;
        } else {
          container.querySelector(`.row-${cell.i}`).innerHTML += `
              <div class="cell-row cell-${cell.j}">
                  <img src="https://via.placeholder.com/100" alt="">
              </div>
          `;
        }
    }); 
}
drawHtml()

<div class="container"></div>

score 0 · Answer 3 · answered Apr 11 '20 at 11:16

This worked solution for your question, but please take attention: this is not very efficient code, fill free to improve this one at your discretion.

let container = document.querySelector('.container');

let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];


container.innerHTML = drawHtml(arr, 3);

function drawHtml(arr, rowLength) {
  // step 1: group cells into group by `rowLength`
  const groupedCellsBy = arr.reduce((acc, cell, indexOf) => {
    const groupIndex = Math.floor(indexOf / rowLength);
    if (acc[groupIndex] === undefined) {
      acc[groupIndex] = [cell];
    } else {
      acc[groupIndex].push(cell);
    }
    return acc;
  }, []);
 
  // step 2: render grouped cells into html
  const resultHtml = groupedCellsBy.reduce((html, group, groupIndex) => {
    return html += `
            <div class="row row-${groupIndex}">
              ${group.reduce((rowHtml, cell) => {
                // substep 2.1: render cells from group into actual row's cells 
                return rowHtml += `<div class="cell cell-${cell.j}">
                    i: ${cell.i} j: ${cell.j}
                    <img src="https://example.com/image.png" alt="">
                </div>`;
              }, '')}
                
            </div>`
  }, '');

  return resultHtml;
}

div {
  border: 1px solid silver;
  color: cyan;
  padding: 1rem;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

<section class="container" />

How to create html rows and cols

3 Answers3