Building Flask url in JavaScript produces empty url

Question

I have a table populated with JSON from an AJAX call. Each row has a link to another Flask route. I am able to create the rows but the urls are not pointing to the correct id, they are empty. Why doesn't this work correctly?

var header = tab.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<b>Col1</b>";
cell2.innerHTML = "<b>Col2</b>";

for (var i = 0; i<data.length; i++){
     var row = tab.insertRow(i+1);
     var cell1 = row.insertCell(0);
     var cell2 = row.insertCell(1);
     var child = data[i]['_id'];
     cell1.innerHTML = '<a href="/query/{{child}}" >' +  child + '</a>';
     cell2.innerHTML = (data[i]['similarity']).toFixed(3);
}

@app.route("/query/<hashcode>", methods=['GET',"POST"])
@app.route("/query/", methods=['GET',"POST"])

def query(hashcode=None):
    if not hashcode == None:
       print hashcode
       sim = similarity(hashcode)
    else:
       print "None Received"
       sim = []
    return render_template('query2.html', hashcode = hashcode, sim = sim)

Where does child in the curly braces in the line cell1.innerHTML = '<a href="/query/{{child}}" >' + child + '</a>'; comes from? — cezar
– cezar, Commented Jul 3, 2015 at 16:44
cell1.innerHTML = '<a href="/query/{{child}}" >' + child + '</a>'; change to cell1.innerHTML = '<a href="/query/' + child + '" >' + child + '</a>'; javascript won't parse that for you. — fuyushimoya
– fuyushimoya, Commented Jul 3, 2015 at 16:53
@fuyushimoya This should be posted as an answer (better said the answer). That line immediately caught my eye. +1 — cezar
– cezar, Commented Jul 3, 2015 at 19:21
@cezar, as your opinion, I've post an answer, with some additional information, hopes that'll make my answer more resourceful. — fuyushimoya
– fuyushimoya, Commented Jul 3, 2015 at 20:05

fuyushimoya · Accepted Answer · 2015-07-03 20:04:35Z

As cezar says, I'll post my comment as an answer:

In current javascript, you can't directly put something like {{child}} when forming a string and hope javascript notice that, and parse it to its value when creating the string.

So you have to do is just like what you append the child to the text part of the <a>:

cell1.innerHTML = '<a href="/query/' + child + '" >' + child + '</a>';

Notice that I say current javascript? In future ES6, you can create a string in that way, with ` notation:

var testStr = "test";
var aString = `this is a ${testStr}`;

and aString would be "this is a test" now, however, if you want to use ES6 feature at this time, you have to use some tools to help you convert code from ES6 to ES5, such as babel

Also, you can learn the ES6 features at some sites: github-es6features, ECMAScript 6 — New Features: Overview & Comparison

Collectives™ on Stack Overflow

Building Flask url in JavaScript produces empty url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related