Javascript syntax for concatenating in URL

Question

I can show orderB.id as table data. I want to use this value in the href, but I am struggling with syntax.

        var output = results.reduce(function (orderA, orderB){
            var row = "<tr>";
            row += "<td>" + orderB.name + "</td>";
            row += "<td>" + orderB.type + "</td>";
            row += "<td>" + orderB.id + "</td>";
            row += "<td><a href='/update/' + orderB.id + >Update</a></td>";
            return orderA + row;
        },"")

I have tried:

            row += "<td><a href='/update/' + orderB.id + >Update</a></td>";
            row += "<td><a href='/update/' + 'orderB.id' + >Update</a></td>";
            row += "<td><a href='/update/orderB.id' + >Update</a></td>";

These output:

/update/
/update/
/update/orderB.id

I want for example: /update/3

All of those lines are literal strings because they start with " and end with" with no break in between. End the literal string, insert the variable, and continue with the rest: "<td><a href='/update/" + orderB.id + "'>Update</a></td>"; Your editor should make it pretty clear when you're writing a string and when you're using a variable. — CertainPerformance
– CertainPerformance, Commented May 1, 2018 at 1:51

Taki · Accepted Answer · 2018-05-01 01:58:04Z

2

use template literals :

row += `<td><a href="/update/${orderB.id}">Update</a></td>`;

or simply concat your variables with the htmml string like :

row += '<td><a href="/update/' + orderB.id + '">Update</a></td>';

edited May 1, 2018 at 1:58

answered May 1, 2018 at 1:52

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kshetline · Accepted Answer · 2018-05-01 01:56:04Z

0

As has been suggested, template literals are a good way to go, but you have to be careful about just sticking strings together to create HTML -- if there are characters like <, >, or & there can be problems. I'd use Lodash and modify the answer given by another poster like this:

row += `<td><a href="/update/${_.escape(orderB.id)}">Update</a></td>`;

answered May 1, 2018 at 1:56

kshetline

14k6 gold badges49 silver badges96 bronze badges

Collectives™ on Stack Overflow

Javascript syntax for concatenating in URL

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related