Javascript JQuery - dynamische Erstellen von Schaltflächen mit Ereignissen mit Parametern

Question

Ich versuche Tasten auf eine Seite in HTML mit Ereignissen zu ihnen auf diese Weise zugewiesen zu erstellen und anhängen:

var mdata = JSON.parse(data); 
mdata.forEach(function(k) { 
    $("#routesPage").append("<button class='accordion' onclick='setRoute("+k._id.$id+")'>"+k.nombre+"</button>"); 
     routesArray[k._id.$id]=k; 
    }); 

Zuvor ich einen Anruf tätigen an einen PHP-Dienst, der mir die Daten aus einer MongoDB-Datenbank liefert, und für jede Daten möchte ich eine Schaltfläche mit einer zugewiesenen Variable erstellen und setRoute() aufrufen. k._id. $ id ist eine Zeichenfolge, die korrekt formatiert ist. Und ich bekomme diesen Fehler:

Uncaught SyntaxError: Invalid or unexpected token 

Ich bin nicht in der Lage, das Problem herauszufinden. Gibt es eine Möglichkeit, dies zu beheben oder es effizienter zu machen?

UPDATE: Dies sind die Rohdaten, die ich von der DB erhalte.

[{"_id":{"$id":"58f224ec34189e19cce416d9"}, 
"origin":"Chicago, IL", 
"destination":"Los Angeles, CA", 
"waypoints":[ 
    {"location":"Joplin, MO","stopover":false}, 
    {"location":"Oklahoma City, OK","stopover":true}], 
"provideRouteAlternatives":false,"travelMode":"WALKING", 
"unitSystem":"google.maps.UnitSystem.METRIC", 
"nombre":"Ruta de Chicago a Los Angeles"}, ... 

Answer 1

Keine Fehler. Vielleicht ist das Problem woanders? Erhalten Sie Daten mit PHP und Ajax?

var routesArray = Array(); 
 
var mdata = JSON.parse('[{"_id":{"$id":"58f224ec34189e19cce416d9"},"origin":"Chicag‌​o, IL","destination":"Los Angeles, CA","waypoints":[{"location":"Joplin, MO","stopover":false},{"location":"Oklahoma City, OK","stopover":true}],"provideRouteAlternatives":false,"trav‌​elMode":"WALKING","u‌​nitSystem":"google.m‌​aps.UnitSystem.METRI‌​C","nombre":"Ruta de Chicago a Los Angeles"}]'); 
 
mdata.forEach(function(k) { 
 
    $("#routesPage").append("<button class='accordion' onclick='setRoute(\"" + k._id.$id + "\")'>" + k.nombre + "</button>"); 
 
    routesArray[k._id.$id] = k; 
 
}); 
 

 
function setRoute(id) { 
 
    console.log(id); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="routesPage"></div>

bearbeiten

ändern onclick='setRoute(" + k._id.$id + ")' zu onclick='setRoute(\"" + k._id.$id + "\")' und wenn Werke überprüfen.