With a basic AJAX web app running locally, a Form POSTs data through Express/Node.js to MongoDB, and a button onClick responds in a rendering of the Mongo document(s) in a div-box.
Using Swig for templating, onClick of the button is only returning a right-brace to appear in the html div-box.
}
..where the ajax posts the wrapper data in index.html:
<!-- For the Returned Fields -->
<div id="theResponse">
</div><!-- /.theResponse -->
How can the jsonpCallback or Templating-Loop be edited to push all the MongoDB docs?
wrapper.html:
{% for go in allDOCs %}
_wrapperGet('{"getting":"{{ keyName }}"}')
{% endfor %}
console.log(returnValue); is listing the mongoDB documents:
{"keyName":"Here's a Value!"}, {"keyName":"Here's another Value!"}
..from app.js
function getAllDOCs(res) {
db.collection('dbCollectionName').find({}, {"_id":0}).toArray(function (err, docs) {
console.log("Got the DOCs: " + docs);
var returnValue = "";
for (var i = 0; i < docs.length; i++)
{
if (returnValue == "")
{
returnValue = returnValue + JSON.stringify(docs[i]);
}
else
{
returnValue = returnValue + ", " + JSON.stringify(docs[i]);
}
console.log(docs[i]);
}
console.log(returnValue);
res.render('wrapper', { allDOCs: returnValue });
});
}
index.html AJAX json parsing:
$.ajax({
dataType: 'jsonp',
jsonpCallback: '_wrapperGet',
data: $('#theForm').serialize(),
type: 'POST',
url: "http://localhost:9090/insert",
success: handleINSERTbuttonResponse,
});
function handleFINDbuttonResponse(data)
{
// parse the json string
var jsonObject = JSON.parse(data);
$('#theResponse').append( jsonObject.getting );
}