Mongodb display searched document data in ejs file - node.js

Question

I am trying to make it so that if I search for a name that Mongodb would search for that document and then that it would display it in the ejs file. And it should do that by changing the text field of a H4 field in the js file at the client side. But when I try to do this it would keep saying that "Query" (which is the name of the searched data that comes back from the document) is not defined. However I only try to give the h4 that name after mongodb has done the search and has brought back that data from the query. For this I am using: Mongodb, express, EJS and nodejs.
Index.js:
router.post('/searchplayer', ensureAuthenticated, function(req, res){
const {text} = req.body;
var input = text
User.findOne({charactername: text})
.then(user => {
if(user) {
const { MongoClient } = require("mongodb");
const url = 'mongodb+srv://test:test1234#databasetest.5f9jh.mongodb.net/Databasetest?retryWrites=true&w=majority';
console.log('player found')
MongoClient.connect(url, function(error, db) {
if (error) throw error;
var dbo = db.db("Databasetest");
var query = { charactername: text };
dbo.collection("users").find(query).toArray(function(error, query, result) {
res.render('main', {
user: req.user,
query,
})
if (error) throw error;
console.log(result);
db.close();
})
});
} else {
console.log("Player does not exist")
}
})
})
Some clarification:
1: The const text is the value that people type in the ejs file.
2: Then it starts to make a search in mongodb to see if that name comes up in any of the avaible documents and returns back that certain document like this: [{charactername: "Jordan"}] which I can see back in the console log.
But now I am trying to view this data in ejs by using this script in the main.ejs:
//Search for user
document.getElementById('playersearchbtn').addEventListener('click',showotheruserpopup)
//Show other user if one is found
function showotheruserpopup() {
if (document.getElementById('searchplayerinput').value.length > 0) {
localStorage.setItem("otherusermenu","open")
document.getElementById('otheruserpopup').style.visibility = "Visible"
var userField = document.getElementById('otherusername')
userField.textContent = "<%= query%>"
localStorage.setItem('userField', userField.textContent)
var retrieveduserField = localStorage.getItem('userField')
userField.textContent = retrieveduserField
} else {
alert('You have to search something..')
}
}
//Close other user popup
document.getElementById('otheruserbtn').addEventListener('click',closeotheruserpopup)
function closeotheruserpopup() {
document.getElementById('otheruserpopup').style.visibility = "Hidden"
}
The situation is that first off the otherusername textcontent element is empty at the start but once it has done this search in mongodb the field text should change to the query which is the data that I got back from the mongodb search. But when I try this EJS will keep telling me that query is not defined in the script at the userField.textContent. Which I found weird because even trough this should get only triggerd by the script, but EJS will just automaticly say that it is not defined. But then I would not know how I could define because it only will exist once the actual search has been made.
How could I fix this issue?

Answer 1

I have found a work around for my problem, I made it render another page where it will shows the data after mongodb has searched for it. This seems to work fine.