I'm trying to create a divs table using javascript. Here is my code.
var data = ['a', 'b', 'c', 'd', 'e'];
var html='';
data.forEach((item, i) => {
if (i % 2 == 0)
html += `<div class="row">`;
if (i % 2 == 0)
html += `<div class="left">${item}</div>`;
if (i % 2 != 0)
html += `<div class="right">${item}</div>`;
if (i % 2 == 0)
html += `</div>`;
html+=`<div class="seperator"></div>`;
})
console.log(html);the output that I get is
<div class="row">
<div class="left">a</div>
</div>
<div class="seperator"></div>
<div class="right">b</div>
<div class="seperator"></div>
<div class="row">
<div class="left">c</div>
</div>
<div class="seperator"></div>
<div class="right">d</div>
<div class="seperator"></div>
<div class="row">
<div class="left">e</div>
</div>
<div class="seperator"></div>
But my target Is something like this, in terms of the table. have a 2 columns table.
When coming to div, the first column is going to be <div class="left"> and 2nd being <div class="right">, the new row seperator will be <div class="seperator"></div>. My expected output is as below.
<div class="row">
<div class="left">a</div>
<div class="right">b</div>
</div>
<div class="seperator"></div>
<div class="row">
<div class="left">c</div>
<div class="right">d</div>
</div>
<div class="seperator"></div>
<div class="row">
<div class="left">e</div>
</div>
<div class="seperator"></div>
Please let me know how Can I achieve this.
Thanks
Why not just do it in a for loop and loop by 2? That way you do not have to worry about closing the tags.
const makeRow = (col1, col2) => {
const col2HTML = col2 ? `<div class="right">${col2}</div>` : '';
return `
<div class="row">
<div class="left">${col1}</div>
${col2HTML}
</div>
<div class="seperator"></div>`;
};
var data = ['a', 'b', 'c', 'd', 'e'];
var html='';
for(let i=0; i< data.length; i+=2) {
html += makeRow(data[i], data[i+1]);
}
console.log(html);If you really want to do it your way, you have to add a check to see if you are at the end of the array.
var data = ['a', 'b', 'c', 'd', 'e'];
var html='';
data.forEach((item, i, arr) => {
if (i % 2 == 0)
html += `<div class="row">\n`;
if (i % 2 == 0)
html += ` <div class="left">${item}</div>\n`;
if (i % 2 != 0)
html += ` <div class="right">${item}</div>\n`;
if (i % 2 != 0 || i === arr.length - 1) {
html += `</div>\n`;
html+=`<div class="seperator"></div>\n`;
}
})
console.log(html);It's probably easier to accomplish if you just loop through the array in 2-big steps.
var data = ['a', 'b', 'c', 'd', 'e'];
var html='';
for (let i = 0; i < data.length; i += 2){
html += `<div class="row">\n`;
if (i < data.length - 1){
html += `<div class="left">${data[i]}</div>\n`;
html += `<div class="right">${data[i+1]}</div>\n`;
}else if (i = data.length - 1){
html += `<div class="left">${data[i]}</div>\n`;
}
html += `</div>\n`;
html+=`<div class="seperator"></div>\n`;
}
console.log(html);The easiest way is to use CSS Grids
const data = ['a', 'b', 'c', 'd', 'e'];
const container = document.querySelector('#container');
for (const datum in data) {
let div = document.createElement('div')
div.innerText = datum;
container.append(div);
}#container {
display: grid;
grid-template-columns: 1fr 1fr;
}<div id="container"></div>