I have a form in a html page, when the form is submitted, I would like a new html page to be served, a mongo database queried, the results sent to the new page and rendered by the client. How can I do this with a get request in Node?
index.html
<form action="dbQuery/formOne" id="form1" method="GET">
<input type="checkbox" id="australia" name="options" value="AUS">
<label for="optionOne">Australia</label>
<input type="checkbox" id="america" name="options" value="USA">
<label for="america">U.S.A.</label>
<button type="submit" class="btn" for="form1" >Next</button>
</form>
Node
const express = require('express');
const bodyParser = require('body-parser')
const mongoose = require('mongoose')
const app = express();
absolutePath = __dirname + '/views/index.html'
mongoose.connect('mongodb+srv://user:password@cluster0.xxxxx.mongodb.net/database')
let db = mongoose.connection;
//check connection
db.once('open', ()=>{
console.log('Connected')
})
//MIDDLEWARE
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
//ROUTES
dbQuery = require('./routes/dbQuery')
app.use('/dbQuery', dbQuery)
//Main pages
app.get('/', function(req, res, next){
res.sendFile(absolutePath)
});
app.listen(process.env.port || 5000, function(){
console.log("Listening on port 5000")
});
Router file
const express = require('express');
const router = express.Router();
const bodyParser = require('body-parser')
const mongoose = require('mongoose')
const path = require('path')
let db = mongoose.connection;
router.get('/formOne', function(req,res, next){
let query = { Country: req.query.options };
result = db.collection('countries').find(query)
res.sendFile(path.resolve('views/countryView.html'))
}
module.exports = router;
What I want to do is get the result object from the get request, pass it into a javascript function on the countryView.html page and let that function render the results, but I am having trouble accessing that result object on the new countryView page.
I am aware there is a possibility of doing this with pug, and rendering it on the server, but I would like to do it on the client
You can pass your data as JSON through a route (/data), and in your HTML file get the data by using AJAX.
router.get('/data', function(req,res){
let result= { "country" : "value" }; // your data from DB
res.json(JSON.parse(result));
}
and in your HTML:
let ajax = new XMLHttpRequest();
ajax.open('get','localhost:5000/data');
ajax.onreadystatechange = function(){
if(this.readyState == XMLHttpRequest.DONE){
if(this.status == 200){
console.log(JSON.parse(ajax.responseText));
}else{
console.log(ajax.status);
}
}
}
ajax.send();