eta icon indicating copy to clipboard operation
eta copied to clipboard

Tables do not render properly

Open markgarrigan opened this issue 2 years ago • 2 comments

Describe the bug When using a <table> element templates that loop an array are not rendering. If I switch table html to divs it works fine.

To Reproduce This html produces an error: Uncaught ReferenceError: item is not defined

    <table>
      <thead>
        <tr>
          <th>Items</th>
          <th></th>
          <th>Quantity</th>
          <th>Unit Price</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <% it.payment.checkout.line_items.data.map(item => { %>
        <tr>
          <td class="name"><%= item.nickname %></td>
          <td class="description"><%= item.description %></td>
          <td class="quantity"><%= item.quantity %></td>
          <td class="price"><%= luna.admin.usd(item.price.unit_amount) %></td>
          <td class="price"><%= luna.admin.usd(item.amount_total) %></td>
        </tr>
        <% }) %>
        <tr class="noborder">
          <td></td>
          <td></td>
          <td></td>
          <td class="subtotal">Subtotal</td>
          <td class="price">$97.00</td>
        </tr>
        <tr class="noborder">
          <td></td>
          <td></td>
          <td></td>
          <td class="subtotal">Shipping (Type of Shipping)</td>
          <td class="price">$7.00</td>
        </tr>
        <tr class="noborder">
          <td></td>
          <td></td>
          <td></td>
          <td class="subtotal">Sales Tax - Location (4%)</td>
          <td class="price">$.34</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td class="total">Total</td>
          <td class="price">$100.00</td>
        </tr>
      </tbody>
    </table>

This html works as expected

      <div>
        <% it.payment.checkout.line_items.data.map(item => { %>
        <div>
          <div class="name"><%= item.nickname %></div>
          <div class="description"><%= item.description %></div>
          <div class="quantity"><%= item.quantity %></div>
          <div class="price"><%= luna.admin.usd(item.price.unit_amount) %></div>
          <div class="price"><%= luna.admin.usd(item.amount_total) %></div>
        </div>
        <% }) %>
        <div class="noborder">
          <div></div>
          <div></div>
          <div></div>
          <div class="subtotal">Subtotal</div>
          <div class="price">$97.00</div>
        </div>
        <div class="noborder">
          <div></div>
          <div></div>
          <div></div>
          <div class="subtotal">Shipping (Type of Shipping)</div>
          <div class="price">$7.00</div>
        </div>
        <div class="noborder">
          <div></div>
          <div></div>
          <div></div>
          <div class="subtotal">Sales Tax - Location (4%)</div>
          <div class="price">$.34</div>
        </div>
        <div>
          <div></div>
          <div></div>
          <div></div>
          <div class="total">Total</div>
          <div class="price">$100.00</div>
        </div>
      </div>

Expected behavior The table should render

Package & Environment Details

  • Chrome Version 103.0.5060.114
  • Node 14.18.2
  • Eta latest version in the browser from unpkg

Additional context I've also tried removing thead and tbody elements. The same error occurs. The same behavior occurs with EJS. So i'm assuming this isn't necessarily a library issue.

markgarrigan avatar Jul 23 '22 13:07 markgarrigan

Will look more into this.

shadowtime2000 avatar Aug 04 '22 03:08 shadowtime2000

@markgarrigan I can't seem to reproduce this issue at all. I used this as my dummy data and removed the references to Luna:

const payment = {
        "checkout": {
            "line_items": {
                "data": [
                    {
                        nickname: "apple",
                        description: "an apple",
                        quantity: 1,
                        price: {
                            unit_amount: 1.5
                        },
                        amount_total: 1.5
                    }
                ]
            }
        }
    }

and I don't seem to be coming across any errors using your example. Maybe it's a problem with the data you're inserting?

shadowtime2000 avatar Aug 11 '22 02:08 shadowtime2000

@markgarrigan are you still experiencing this issue?

nebrelbug avatar Dec 14 '22 04:12 nebrelbug

Closing as stale.

nebrelbug avatar Jan 31 '23 05:01 nebrelbug