jQuery AJAX call on NodeJS and MongoDB (POST req) - ajax

Question

my problem is, i can't retrieve data using AJAX (post) on my NodeJS and MongoDB. Im using body-parser. i use post request because the data will be dependent on what the value of my 1st dropdown is.
Here is my code
NodeJS
app.get('/test', function(req, res){
City.findOne({'thecity': 'Auckland'}).populate('coolplaces').exec(function(err, thecoolplace){
if(err){
console.log(err);
} else {
res.send(thecoolplace);
}
});
});
app.post('/testpost', function(req, res){
City.findOne({'thecity': req.body.thecityname}).populate('coolplaces').exec(function(err, thecoolplace){
if(err){
console.log(err);
} else {
res.send(thecoolplace);
}
});
});
EJS
<select id="cities" name="thecityname">
<% City.forEach(function(city){ %>
<option val="<%= city.thecity %>"><%= city.thecity %></option>
<% }); %>
</select>
<select id="coolplace" name="thecities">
</select>
So basically, i have 2 dropdown list, my goal is, on my 1st dropdown, it contains the city name, then when i selected a city name on it, it should fillup the second dropdown with the places based on that city (i've handled that data on database).
As you can see on my NodeJS code, at first, i tried using GET request then query the database based on its name and i used hardcoded one which is 'Auckland', the ajax call works find, it fills up the second drop down of the places in Auckland.
Now since my goal is to populate the second form based on the selected value on 1st dropdown, i create a post request, same code, except the query value will depend on the 'req.body.thecityname' which is the 'name' of my tag.
Now this is my Ajax Code
$('#cities').change(function(){
theAjax();
});
function theAjax(){
console.log($('#cities').val())
$.ajax({
type: 'POST',
url: '/testpost',
data: $('#cities').val(),
success: function(data){
console.log(data);
},
error: function(){
alert('No data');
}
});
}
function fillupPlaces(){
var $coolplaces = $('#coolplace');
$.ajax({
url: '/test',
type: 'GET',
dataType: 'json',
success: function(data){
data.coolplaces.forEach(function(thecoolplaces){
$coolplaces.append('<option>' + thecoolplaces.theplacename + '</option>');
});
}
});
}
Whenever the value on the 1st dropdown change, the Ajax will trigger, on the 1st line, i console.log the value of it and it returns the value of the data that i selected, but on the Ajax success, the console.log(data) returns nothing.
The second function works, but what i want is, to fillup the second dropdown with the places based on the city
Here's the screenshot
What am i doing wrong? thank you guys!

Answer 1

Try changing the post data to an object with the key 'thecityname' and the value as the city name.
function theAjax(){
console.log($('#cities').val())
$.ajax({
type: 'POST',
url: '/testpost',
data: {
thecityname: $('#cities').val(),
},
success: function(data){
console.log(data);
},
error: function(){
alert('No data');
}
});
}
Adding a console.log like below may be helpful. If only the city is sent as post data, instead of an object with key 'thecityname', then req.body.thecityname will be undefined.
app.post('/testpost', function(req, res){
console.log('req.body.thecityname is ' + req.body.thecityname);
City.findOne({'thecity': req.body.thecityname}).populate('coolplaces').exec(function(err, thecoolplace){
if(err){
console.log(err);
} else {
res.send(thecoolplace);
}
});
});