CODEWITHSUNDEEP
javascriptloops
Nikola Stoyanov
Nikola Stoyanov

Reputation: 59

Javascript looping through a list not working

I'm trying to make a table of emojis and made a foreach loop to make a table:

emojis = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈', '😉', '😊', '😋', '😌', '😍', '😎', '😏', '😐', '😑', '😒', '😓', '😔', '😕', '😖', '😗', '😘', '😙', '😚', '😛', '😜', '😝', '😞', '😟', '😠', '😡', '😢', '😣', '😤', '😥', '😦', '😧', '😨', '😩', '😪', '😫', '😬', '😭', '😮', '😯', '😰', '😱', '😲', '😳', '😴', '😵', '😶', '😷', '🙈', '🙉', '🙊', '👆', '👇', '👈', '👉', '👊', '👋', '👌', '👍', '👎', '👏', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']
var i = 0
document.getElementById("emojiTable").innerHTML += "<table><tr>"
emojis.forEach(emoji => {
  if(i == 12) {
    document.getElementById("emojiTable").innerHTML += "</tr><tr>"
    i = 0
  }
  document.getElementById("emojiTable").innerHTML += "<td>"+emoji+"</td>"
  i ++
  })
  document.getElementById("emojiBAR").innerHTML += "</table>"

My problem is that when i run the code instead of getting a 12 x 6 table i get this weird piece of HTML:

<table><tbody><tr></tr></tbody></table>😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙈🙉🙊👆👇👈👉👊👋👌👍👎👏⚡✊✋✌✍❤⭐

I have no idea what is causing this. How can i fix this?

Upvotes: 3

Views: 101

Answers (3)

charlietfl
charlietfl

Reputation: 171669

A more practical approach that creates a table element and uses Table.insertRow() and Row.insertCell():

emojis = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈', '😉', '😊', '😋', '😌', '😍', '😎', '😏', '😐', '😑', '😒', '😓', '😔', '😕', '😖', '😗', '😘', '😙', '😚', '😛', '😜', '😝', '😞', '😟', '😠', '😡', '😢', '😣', '😤', '😥', '😦', '😧', '😨', '😩', '😪', '😫', '😬', '😭', '😮', '😯', '😰', '😱', '😲', '😳', '😴', '😵', '😶', '😷', '🙈', '🙉', '🙊', '👆', '👇', '👈', '👉', '👊', '👋', '👌', '👍', '👎', '👏', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']

const table = document.createElement('table');
let row;

emojis.forEach((emoji, i) => {
  if (i % 12 === 0) {
    row = table.insertRow();
  }
   row.insertCell().innerHTML = emoji;  
})

document.getElementById("emojiTable").append(table)
<div id="emojiTable"></div>

Upvotes: 4

Mister Jojo
Mister Jojo

Reputation: 22320

you want that ??

const emojis = 
  [ '😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈', '😉', '😊', '😋'
  , '😌', '😍', '😎', '😏', '😐', '😑', '😒', '😓', '😔', '😕', '😖', '😗'
  , '😘', '😙', '😚', '😛', '😜', '😝', '😞', '😟', '😠', '😡', '😢', '😣'
  , '😤', '😥', '😦', '😧', '😨', '😩', '😪', '😫', '😬', '😭', '😮', '😯'
  , '😰', '😱', '😲', '😳', '😴', '😵', '😶', '😷', '🙈', '🙉', '🙊', '👆'
  , '👇', '👈', '👉', '👊', '👋', '👌', '👍', '👎', '👏', '⚡', '✊', '✋'
  , '✌', '✍', '❤', '⭐']
  ;
(function() // IIFE generateTable
  {
  let eTable = document.createElement('table')
    , cRow   = null

  emojis.forEach( (emoji,indx)=>
    {
    if ( !(indx % 12)) cRow = eTable.insertRow()
    cRow.insertCell().innerHTML = emoji
    })
  document.getElementById('emojiTable').appendChild(eTable)
  })()
table {
  border-collapse: collapse;
  margin: .5em;
}
td {
  padding: .2em .7em;
  border: 1px solid grey;
}
<div id="emojiTable"></div>

Upvotes: 0

Pranav Rustagi
Pranav Rustagi

Reputation: 2731

Try this :

emojis = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈', '😉', '😊', '😋', '😌', '😍', '😎', '😏', '😐', '😑', '😒', '😓', '😔', '😕', '😖', '😗', '😘', '😙', '😚', '😛', '😜', '😝', '😞', '😟', '😠', '😡', '😢', '😣', '😤', '😥', '😦', '😧', '😨', '😩', '😪', '😫', '😬', '😭', '😮', '😯', '😰', '😱', '😲', '😳', '😴', '😵', '😶', '😷', '🙈', '🙉', '🙊', '👆', '👇', '👈', '👉', '👊', '👋', '👌', '👍', '👎', '👏', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']

var i = 0
var table = document.getElementById("emojiTable");
var str = "<table><tr>";

emojis.forEach(emoji => {
  if (i == 12) {
    str += "</tr><tr>";
    i = 0
  }
  str += "<td>" + emoji + "</td>";
  i++
})

table.innerHTML = str;
//document.getElementById("emojiBAR").innerHTML += "</table>"
<div id="emojiTable"> </div>

Upvotes: 1

Related Questions