Question

I’ve got a table in jade that’ll be dynamically generated through express (res.render('index', {classes: results})):

table
  tr
    th Title
    th School
    th Description
- if (classes.length) {
- classes.forEach(function(aClass) {
  tr
    td= aClass.title
    td= aClass.school
    td= aClass.desc
- });}

However, when I render it, the data comes out as one garbled mess. Looking at the HTML source reveals that the </table> tag is before the content in classes. How can I solve this?

Answer 1

You’ve almost got it – jade is being finicky here. When creating an iterative loop, you need to make sure that your JavaScript is indented to the same level as your data:

table
  tr
    th Title
    th School
    th Description
  - if (classes.length) {
  - classes.forEach(function(aClass) {
  tr
    td= aClass.title
    td= aClass.school
    td= aClass.desc
  - });}

If this makes your inner coder cringe at the code style, I’m with you. However, that’s the way it is. Alternatively, you could use jade’s each (documented here)

table
  tr
    th Title
    th School
    th Description
  - if (classes.length) {
  each aClass in classes
    tr
      td= aClass.title
      td= aClass.school
      td= aClass.desc
  - }

Again, this looks a little wonky but is the jade way to iterate.