Node.js express, handlebars - get elements of an array
Solution 1
First of all, lets assume that your files:items
is a handlebar'd array looking kinda like this.
{ files:['filenameOne.ext', 'filenameTwo.ext', 'filenameThree.exe'] };
Now when you've written this on the response and you want to loop over the array in handlebars.js this is how your HTML should look like, using your code.
<div id="container">
<div class="highlight">
<img src="img/highlight.png"></img>
<p>A Click to download</p>
</div>
<ul>
<li class="RoundedAll"><a href="/">Back</a></li>
</ul>
<br />
<ul>
{{#each files}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
The <li>{{this}}</li>
will contain the filename's that is contained within your list.
To then access that you would have to make a <a>
that links to a controller, app.get('/getActualFile', function(){ //serve the file here });
and then write the fetched file on the response.
Hope this points you in the right the direction and that the use of an iterator in handlebars is a bit more obvious.
I myself does not prefer handlebars but that is since i'm not used to it completely. I myself like this template-language for Node.js better, http://paularmstrong.github.com/swig/
It features a bit more "clear" syntax but is probably worse than handlebars considering the diffrent ways you can customize Handlebars.
Solution 2
in order to make this work how you have it coded you need a key:value pair.
var arr = {path: "element1", title: "element2"};
the following:
var arr = {path: "downloads/mynewdownload", title: "My New Download"};
{{#each arr}}
<a href="/{{path}}">{{title}}</a>
{{/each}}
would yield:
<div id="container">
<div class="highlight">
<img src="img/highlight.png"></img>
<p>A Click to download</p>
</div>
<ul>
<li class="RoundedAll"><a href="/downloads/mynewdownload">My New Download</a></li>
</ul>
<br />
</div>
if you have multiple key value pairs they can be stored in an array and accessed the same way.
Gábor
Updated on June 04, 2022Comments
-
Gábor about 2 years
I have an array like this:
var arr = ["element1","element2"];
and I would like to get the elements of it in a handlebars file.
I googled with no result the only solution what i found is this:
{{#each files}} <a href="/"{{path}}"">{{title}}</a> {{/each}}
But this is not good for me because I would like to achive that all of my files in a directory could be downloadable.
The code what I tried on the server side:
app.get('/download',function(req,res){ var items; fs.readdir('./download',function(err,files){ items = files; }); res.render('download',{ files:items }); });
And I don't know how to iterate on the client side to make all of the elements in the array downloadable.
On the clien side I have an unordered list which will contain the links. The problem is, that I have no idea how to achive that.
The code on the clien side:
<div id="container"> <div class="highlight"> <img src="img/highlight.png"></img> <p>A Click to download</p> </div> <ul> <li class="RoundedAll"><a href="/">Back</a></li> </ul> <br /> <ul> <!-- What should I put here? --> </ul> </div>
Thanks for answers.