Node.js express, handlebars - get elements of an array

Question

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.

is `<a href="{{arr.0}}">{{arr.0}}</a> better? If not could you please post a pseudocode of what you'd like to achieve? — Henrik Andersson
– Henrik Andersson, Commented Dec 4, 2012 at 20:08
I have a code: app.get('/download',function(req,res){ var items; fs.readdir('./download',function(err,files){ for (var i=0;i<files.length;i++){ items = files; } }); res.render('download',{ files:items }); }); I would like to achive that all of my files in the directory could be downloadable. — Gábor
– Gábor, Commented Dec 4, 2012 at 20:17
All right, could you please update your question to reflect that requirement? Also, please post what you have already tried. — Henrik Andersson
– Henrik Andersson, Commented Dec 4, 2012 at 20:21

Henrik Andersson · Accepted Answer · 2016-08-12 07:46:03Z

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.

GHETTO.CHiLD · Accepted Answer · 2014-05-01 12:07:12Z

1

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.

answered May 1, 2014 at 12:07

GHETTO.CHiLD

3,4161 gold badge26 silver badges36 bronze badges

Comments

perror · Accepted Answer · 2015-08-13 09:14:09Z

0

Try this:

<ul>
{{#each people}}
   <li>{{this}}</li>
{{/each}}
</ul>

edited Aug 13, 2015 at 9:14

perror

7,52616 gold badges63 silver badges89 bronze badges

answered Aug 13, 2015 at 8:47

Trevor Joseph

312 bronze badges

Collectives™ on Stack Overflow

Node.js express, handlebars - get elements of an array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related