forEach error in Table

[netonrails]

This code is Error.

Error message is as below.

var data = {title: ".....", users:[{name: .. , age: ...}]}
var tpl = vash.compile($('#list').html())
$('#list').html(tpl(data))

Uncaught ReferenceError: Problem while rendering template at line ....
...
Original message: user is not defined

<div id="list">
<h1>@model.title</h1>
<table>
  <tr>
    <th>name</th>
    <th>age</th>
  </tr>
  @model.users.forEach(function(user) {
  <tr>
    <td>@user.name</td>
    <td>@user.age</td>
  </tr>
  })
</table>
</div>

but below is not error.

<ul>
  @model.users.forEach(function(user) {
    <li>@user.name - @user.age</li>
  })
</ul>

Why does this error occur?
How can I fix it?

[kirbysayshi]

I just tried running the following code, and it rendered properly:

var vash = require('vash');
var str = ''
  + '<div id="list">\n'
  + '<h1>@model.title</h1>\n'
  + '<table>\n'
  + '  <tr>\n'
  + '    <th>name</th>\n'
  + '    <th>age</th>\n'
  + '  </tr>\n'
  + '  @model.users.forEach(function(user) {\n'
  + '  <tr>\n'
  + '    <td>@user.name</td>\n'
  + '    <td>@user.age</td>\n'
  + '  </tr>\n'
  + '  })\n'
  + '</table>\n'
  + '</div>\n'
var tpl2 = vash.compile(str, {useWith: false, debug: false});
var m = { title: '.....', users:[{ name: 'hey' , age: 27 }] };
console.log('FN', tpl2);
console.log('FN STRING', tpl2.toString());
console.log('FN CLIENTSTRING', tpl2.toClientString());
console.log('FN OUTPUT', tpl2(m))

So I'm guessing the error is because perhaps your users array contains an undefined value at an index? Not sure though. Maybe try doing a @{ console.log(user) } within the forEach?

[kirbysayshi]

Hey, I haven't heard anything, so I'm going to close this issue. Feel free to reopen if you find it's an inconsistency within vash vs the input data.

[netonrails]

I'm late, sorry.

I resolved this problem.

This code is no problem, if template in javascript that like @kirbysayshi
But I used above template in HTML code.

<div id="list">
<h1>@model.title</h1>
<table>
  <tr>
    <th>name</th>
    <th>age</th>
  </tr>
  @model.users.forEach(function(user) {
  <tr>
    <td>@user.name</td>
    <td>@user.age</td>
  </tr>
  })
</table>
</div>

var data = {title: ".....", users:[{name: .. , age: ...}]}
var tpl = vash.compile($('#list').html())
$('#list').html(tpl(data))

Web Browser parse above source to below.

<script type="html/text">
@model.users.forEach(function(user) {
  })
<table>
  <tr>
    <th>name</th>
    <th>age</th>
  </tr>
  <tr>
    <td>@user.name</td>
    <td>@user.age</td>
  </tr>
</table>
</script>

HTML restrict to use literal between tag.
So, Vash loop code was thrown out from

tag.

It is looks like a problem happens inevitably, because HTML parsed by Browser.

[kirbysayshi]

This is because you specified html/text as the type attribute in your script tag. If you instead specify something that the browser doesn't know about, like text/vash, then the browser will not use the HTML parser on the contents.

[netonrails]

Oh! got it. Thanks, @kirbysayshi

[kirbysayshi]

Cool, glad to help!