CODEWITHSUNDEEP
node.jshtml-tablepug
Mike Monteiro
Mike Monteiro

Reputation: 1457

How can I generate a table with sections with Jade?

Thanks in advance for taking the time to try to help. I am using the Jade templating engine in node.js, and want to generate an HTML table with rows grouped into sections (tbody tags).

Let's say I have the following object in memory:

[
    { type: 'Fruit', name: 'Apple' }
  , { type: 'Fruit', name: 'Orange' }
  , { type: 'Vegetable', name: 'Carrot' }
  , { type: 'Vegetable', name: 'Spinach'}
]

(for simplicity, let's assume the array comes pre-ordered by the "type" column).

And I want to generate a table with rows for each object inside a tbody section for each "type" (Fruit vs. Vegetable). So the HTML I'm trying to generate is:

<table>
<thead>
  <th>Type</th>
  <th>Name</th>
</thead>
<tbody id="Fruit">
  <tr>
    <td>Fruit</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Fruit</td>
    <td>Orange</td>
  </tr>
</tbody>
<tbody id="Vegetable">
  <tr>
    <td>Vegetable</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Vegetable</td>
    <td>Spinach</td>
  </tr>
</tbody>
</table>

I think I would want my jade to look something like:

table
  thead
    th Type
    th Name
  - var lastType;
  each o in objs
    - if(o.type != lastType)
      tbody(id='#{o.type}')
      - lastType = o.type;
    tr
      td #{o.type}
      td #{o.name}

But this generates:

<table>
<thead>
  <th>Type</th>
  <th>Name</th>
</thead>
<tbody id="Fruit" />
<tbody>
  <tr>
    <td>Fruit</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Fruit</td>
    <td>Orange</td>
  </tr>
</tbody>
<tbody id="Vegetable" />
<tbody>
  <tr>
    <td>Vegetable</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Vegetable</td>
    <td>Spinach</td>
  </tr>
</tbody>
</table>

Any ideas?

Upvotes: 2

Views: 1503

Answers (2)

Freddy Chris
Freddy Chris

Reputation: 51

table
  thead
    th Type
    th Name
  tbody#Fruit
    tbody
      tr
        td Fruit
        td Apple
      tr
        td Fruit
        td Orange
    tbody#Vegetable
      tbody
        tr
          td Vegetable
          td Carrot
        tr
          td Vegetable
          td Spinach

You should go with pug basic formate to list the following process

Upvotes: 0

ztirom
ztirom

Reputation: 4438

This is in Jade kinda hard to guess, because we don't really see how your indentations are really set in your local code, but here(your posted snippet) it seems like your indentations are not right.

You should try this: +Update (added another loop to get all same types under each body)

table
    thead
        th Type
        th Name
    - var lastType;
    each o in objs
        - if (o.type != lastType)
            - lastType = o.type;
            tbody(id='#{o.type}')
                each t in objs
                    - if(t.type === lastType)
                        tr
                            td #{t.type} 
                            td #{t.name}

Just shift the both tr tags into your tbody, like my code example above.

+Update This will produce this HTML code now:

<table>
  <thead>
    <th>Type</th>
    <th>Name</th>
  </thead>
  <tbody id="Fruit">
    <tr>
      <td>Fruit </td>
      <td>Apple</td>
    </tr>
    <tr>
      <td>Fruit </td>
      <td>Orange</td>
    </tr>
  </tbody>
  <tbody id="Vegetable">
    <tr>
      <td>Vegetable </td>
      <td>Carrot</td>
    </tr>
    <tr>
      <td>Vegetable </td>
      <td>Spinach</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions