So I am creating a web app for a calorie counter appl, the page im stuck on currently is a search food page, so the user types in the food in the search bar, if its in the database ive created it will show the food and all its nutrition,
Now this all works fine, however if the user types in a food which is not in the database or which is spelt incorrectly, it is supposed to be showing a message on screen stating so.
This is my main.js file
app.get("/search-result", function (req, res) {
//searching in the database
let word = [`%${req.query.name}%`];
let sqlquery = `SELECT * FROM food WHERE name LIKE '%${req.query.name}%'`;
db.query(sqlquery, (err, result) => {
if (err) {
return console.error('There is no food with that name' + req.query.name);
}else{
res.render('ListFood.html', {availableFood: result});
}
});
});
This is my index.js file
const express = require ("express");
const bodyParser = require ("body-parser");
const app = express();
const mysql = require("mysql");
const port = 8089;
app.use(bodyParser.urlencoded({ extended: true }));
const db = mysql.createConnection ({
host: "localhost",
user: "root",
password: "root",
database: "foodList" });
// connect to database
db.connect((err) => {
if (err) {
throw err;
}
console.log("Connected to database");
});
global.db = db;
require("./routes/main")(app);
app.set("views",__dirname + "/views");
app.set("view engine", "ejs");
app.engine("html", require("ejs").renderFile);
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
This is my search food.html view file
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<h1> Food Search page </h1>
<p>In the box below please type in the name of the food you would like to search for in our database. If the food is in the database it will show you the nutritonal values, if it is not in our database and you would like to add it in, please visit the Add Food page.</p>
<form action="/topic7/mid-term/search-result/" method="GET">
<input id="search-box" type="text" name="name" value="Food Name">
<input type="submit" value="Submit" >
</form>
<br>
<a href="/topic7/mid-term/"><strong>HOME</strong></a>
<br>
</body>
</html>
And finally this is my list food.html, this is the page it shows when the food is correct, but seems to get stuck reading the title and header even when the food is not in the database
<!doctype html>
<html>
<head>
<title>List webpage!</title>
</head>
<body>
<h1> Food List </h1>
<h3>You can see names and nutritional values of different food here:</h3>
<ul>
<% availableFood.forEach(function(food){ %>
<li><%= food.name %>, Typical Value: <%= food.typicalvalues %>, Unit of typical value: <%= food.Unitofthetypicalvalue %>, calories: <%= food.calories %>, carbs: <%= food.carbs %>, fat: <%= food.fat %>, protein: <%= food.protein %>, salt: <%= food.salt %>, sugar: <%= food.sugar %></li>
<% }) %>
</ul>
</body>
</html>
Ive been looking at this for hours and just cant seem to figure out why.
I am very new to this so any help is greatly appreciated.
question from:
https://stackoverflow.com/questions/65870998/can-anyone-help-me-with-node-js-database-querying-with-a-search-box 
