eta
eta copied to clipboard
Tables do not render properly
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.
Will look more into this.
@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?
@markgarrigan are you still experiencing this issue?
Closing as stale.