How to transmit data to client-side js file from the server?
sniffingdoggo
I want to transmit my data to client-side JS file from the server, but right now the browser displays data on its main screen like when we use innerHTML property:
I have checked bunch of express.js tutorials but seems like there are no way to send (add, technically) data to the client side js file.
This is a diagram what I'm looking for:
[open the webpage] -> [(in server) get data from database] -> [send data to client-side js file] -> // do stuff more in the client-side
Any tips to resolve this problem?
This is my code:
// Makes display the client-side html, temporary disabled.
// app.use(express.static('client'));
// Queries
const QUERIES = {
prev: 'SELECT * FROM en.prevstore',
curr: 'SELECT * FROM en.currstore',
next: 'SELECT * FROM en.nextstore',
samp: 'SELECT * FROM en.sample'
}
// Create connection
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password123',
database: 'en'
});
// Router
app.use('/', (req, res) => {
db.query(QUERIES.samp, (err, results) => {
let ternary = err ? console.error(err) : res.json(results);
})
})
Client-Side HTML (request from the comment)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="quotes">
should be filled as quotes of data from database
</div>
<div class="color">
should be filled as color of data from database
</div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
Client-Side JS:
function getWord() {
fetch('http://localhost:4000')
.then(res => res.json())
.then(({data}) => console.log(data))
}
getWord() // I know it won't work but tried for just in case.
Kornflexx
When you tried to load localhost:4000 on your browser and it is requesting your / endpoint.
Your server has to return your static files (index.html & ...) on this endpoint.
app.use(express.static('public'));
// public or any static directory containing your index.html, .js, images ...
Then you can move your / endpoint to something more explicit like /quotes
app.use('/quotes', (req, res) => {
db.query(QUERIES.samp, (err, results) => {
if (err) {
console.log('error', err);
res.status(500);
return res.end(); // closing the response /!\ IMPORTANT
}
res.json(results);
})
})
On your client-side you will have something like that:
function getWord() {
fetch('http://localhost:4000/quotes')
.then(res => res.json())
.then(data => console.log(data))
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Cannot specify compile options for imported target "..."
- Next: new SomeModule::SomeName vs SomeModule::SomeName->new(), what's the difference?
Related
TOP Ranking
- 1
pump.io port in URL
- 2
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 3
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 6
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 7
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 8
Using Response.Redirect with Friendly URLS in ASP.NET
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
Double spacing in rmarkdown pdf
- 11
How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?
- 12
3D Touch Peek Swipe Like Mail
- 13
Bootstrap 5 Static Modal Still Closes when I Click Outside
- 14
Assembly definition can't resolve namespaces from external packages
- 15
Vector input in shiny R and then use it
- 16
Emulator wrong screen resolution in Android Studio 1.3
- 17
Svchost high CPU from Microsoft.BingWeather app errors
- 18
Graphics Context misaligned on first paint
- 19
Python connect to firebird docker database
- 20
Is this docker-for-mac password dialog legit?
- 21
How to save models trained locally in Amazon SageMaker?
Comments