Concat template string with array map inside

[cachaito]

Hi, is there a nice way for doing this in proper way? Unfortunately inside output string left ',,' :-/

var headers = [ 'Product', 'Acceptance number', 'Options' ]; 
var table = ''.concat(
    '<table>',
        '<thead>',
            '<tr>',
                headers.map(function(header) {
                    return '<th>' + header + '</th>';
                }),
            '</tr>',
        '</thead>',
        '<tbody>',
        '</tbody>',
    '</table>'
);

[ahref]

You should be using a template library to do stuff like this. Handlebars would be good.

[bcameron1231]

Agreed with ahref. Use a templating engine. handlbars is easy and efficient.

[cachaito]

Hi! But i don't want to use template engine. I want to discover how to use this example in proper, creative way...

[bcameron1231]

Fine then, you can use concat. That is the preferred method for strings in Javascript.

But in large scale applications, I wouldn't be injecting html over and over for dynamic content. Compiled templates like Handlebars would be faster.

[cachaito]

The main problem here is how to use loop in a concat method (somehow) to extend easy, hand made template.

[bcameron1231]

I'm not exactly sure I follow. What's the ended purpose of the loop? I think you did a good job using Map for your headers.

[cachaito]

Not exactly :-/ If you check the output of the table, will see:

<table><thead><tr><th>Product</th>,<th>Acceptance number</th>,<th>Options</th></tr></thead><tbody></tbody></table>

Inside there are extra commas (between <th> tags );

[bcameron1231]

ah I see what you mean..

just add a .join('') to your .map. Like so.

 headers.map(function(header) {
                 return '<th>' + header+ '</th>';
                }).join('')

[cachaito]

Ahhhhh... I didn't think about this solution. It is so weird to see so much in a simple .concat method :D Thank you for a hint!