Making table using for-loop

Question

I have this code. It's very good and has no error in it. But I don't like repeat the code html += "td"; a lot. Eaven html += "/td";. It is seing not clearly code. How can I code it in shorter code using for loop?

html = "<table>";
html += "<tr>";
for(var name in newArticle[1]){
  html += "<th>";
  html += name;
  html += "</th>";
}
html += "</tr>";
for (var i=0; i<newArticle.length; i++) {
    html += "<tr>";
    html += "<td>";
    html += newArticle[i]["id"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["Forename"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["Surname"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["Age"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["City"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["ZIP"];
    html += "</td>";
    html += "</tr>";
}
html += "</table>";
  console.log(html);

  for(var name in newArticle[1]){
    console.log(name);
  }

You can note that newArticle() is an array and the table data is from array's elements.

No, it's not very good. newArticle() is not an array, it's a function call. But there's no function like that, it's undefined, which would make this whole thing to have at least one error. Your indentation is off, you don't properly declare variables and it's just bad, bad, bad. Welcome to StackOverflow. — manonthemat
– manonthemat, Commented Jun 11, 2017 at 19:37
Don't manually create HTML like that. Look up the createElement and similar functions. Create element objects and append children to them. — Carcigenicate
– Carcigenicate, Commented Jun 11, 2017 at 19:40

ifconfig · Accepted Answer · 2017-06-11 19:45:14Z

1

newArticle = 
html = "<table>";
html += "<tr>";
for(var name in newArticle[1]){
  html += "<th>";
  html += name;
  html += "</th>";
}
html += "</tr>";
for (var i=0; i<newArticle.length; i++) {
  html += "<tr>";
  for(var key in newArticle[i])
  {
    html += "<td>";
    html += newArticle[i][key];
    html += "</td>";
  }
  html += "</tr>";
}
html += "</table>";
console.log(html);    
for(var name in newArticle[1]){
  console.log(name);
}

edited Jun 11, 2017 at 19:45

ifconfig

6,97810 gold badges48 silver badges68 bronze badges

answered Jun 11, 2017 at 19:40

Murad Sofiyev

7911 gold badge8 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viraj Prateek · Accepted Answer · 2017-06-11 19:45:13Z

0

Define a new array (say myarr with elements in order as required by the column of the newArticle array. Now to use the newArticle array in for loop like this -

newArticle[i][myarr[j]] ;

You can initiate j from 0 and keep incrementing it to get the next respective values . Hope it helps .

answered Jun 11, 2017 at 19:45

Viraj Prateek

55 bronze badges

Collectives™ on Stack Overflow

Making table using for-loop

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related