Passing url in async xhttp request not hitting server (although does it first time) - getting syntax error

Question

In my html5 template (also using GAE and datastore/python), I'm making an async js call to server and coming back with some more categories FROM WHICH results/data choices are then given for the user to trigger another selection which shoots off the same async call method. It works the first time, but in the second, it comes back with a syntax error. The call doesn't even seem to make it to the method (no logs!), what gives??? The only difference between the 2 calls to the async js method is in the data passed through the url. There are 3 parameters passed with 1 parameter being used to form the url routing for the server. In both calls, an object key is part of the url. In the first one, the url is derived from the original template rendering through a jinja object {{item.key()}}. In the second one, the key is derived from the key which is stored as a value in the json dictionary passed back from the first one. Perhaps there is something going on here because it does not seem to even hit the server in the second?

The first time the catkey is populated with jinja object key----: var html_output = ""; {% for item in cat_profession %}

        var nameString = "{{item.name}}";
    html_output += "<a href=\"javascript:getNextLevel(\'{{item.key()}}\',\'{{item.name}}\')\">" + nameString + "</a><br />";
     {% endfor %}

which works BUT the second time, I'm using the results from the first one to generate categories to call json again to get more for (var key in cat_JSON) { html_output += "" + key + "
";

the cat_JSON[key] is a string --- there is something funky going on - but the console logs for the url seem to be ok and I don't see any evidence it is actually reaching server method. The JSON above has the name stored in the key, and the object key stored as the value. Here's the js function:

 function getNextLevel(catkey,catname) {
     url = "/api/filter/" + catkey;

     subjectAPI.open("GET", url, true);

     console.log("url is ", url);
     subjectAPI.onload = function() {
     var cat_JSON = JSON.parse(this.responseText);

     var html_output = "";

for (var key in cat_JSON) 
    {
      html_output += "<a href=\"javascript:getNextLevel(\'" + cat_JSON[key] + "\',\'" + key + "\'," + ")\">" + key + "</a><br />";              
    }

$(#col).append(html_output);

   }

subjectAPI.send();
 }              

Answer 1

I think you should provide more code how you make the first ajax and the second ajax so that we know more about your issue. With the current information provided, I guess you perform 2 ajax requests in succession and that could be the problem, since ajax request is asyn. When you perform the second request, the response from the first request may not arrive yet.

Updated based on updated question:

The problem is this line, there is a redundant , character at the end

"javascript:getNextLevel(\'" + cat_JSON[key] + "\',\'" + key + "\'," + ")\">"

It should be:

"javascript:getNextLevel(\'" + cat_JSON[key] + "\',\'" + key  + "\')\">"