var express = require('express');
var app = express();
app.use("/", function(request, response){
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("Test");
dbo.collection("users").find({}, { "name":"John" }).toArray(function(err, result) {
if (err) throw err;
console.log(result);
// res.sendFile(__dirname + "/views/index.ejs");
db.close();
});
});
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./index.js"></script>
<title>Document</title>
</head>
<body>
<h1 id="result"><%=result%></h1>
</body>
</html>
I have 2 files and I want to use a variable from one file in another. How can I send the variable result from my nodejs file to my ejs file, in <h1 id="result"><%=result%></h1>?
In order to do that you have to use express res.render()
according to the docs
res.render(view [, locals] [, callback])
Renders a view and sends the rendered HTML string to the client. Optional parameters:
locals, an object whose properties define local variables for the view.
You should use something like this
res.render('index',{result});
then now you would be able to access that value you have sent over in your index.ejs file however I would advice you to explicitly declare in your application that you are using ejs so that you would not have to go through the struggles of re-stating ejs at the end of you code like before
at the top after this code var app = express()
you could say
app.set("view engine", "ejs");
Related
I am following this video: https://youtu.be/5TxF9PQaq4U?t=600
When he makes a GET request to localhost:8383/info the JSON {info: "Text"} is shown inside the network-tab but the browser still displays the HTML page. When I make the GET request to localhost:8383/info, the browser displays the JSON but not the HTML. How can I get the same result as him?
Index.html (inside "public" folder)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input id="input" type="text">
<button id="get">Get</button>
</form>
</body>
<script>
const input = document.getElementById("input")
const getbtn = document.getElementById("get")
getbtn.addEventListener("click", getInfo);
async function getInfo(e) {
e.preventDefault()
const res = await fetch("http://localhost:8383/info", {method: "GET"})
console.log(res)
}
</script>
</html>
Server.js
const express = require("express")
const app = express()
const port = 8383
app.use(express.static("public"))
app.get("/info", (req, res) => {
res.status(200).json({info: "Text"})
})
app.listen(port, ( ) => console.log("Server started"))
This is what the browser displays on localhost:8383/info
I have tried to make the GET request to localhost:8383 (without info) but then the response is the HTML file, not {info: "Text"}.
You missed two places
#1 Need to add CORS in server.js
app.use(cors());
#2 Need to add DOM element in index.html and update it in script.
<p id="message">
The message will go here
</p>
...
document.getElementById('message').textContent = JSON.stringify(info);
This is full code.
const express = require("express")
const cors = require('cors');
const app = express()
const port = 8383
app.use(cors());
app.get("/info", (req, res) => {
res.status(200).json({info: "Text"})
})
app.listen(port, ( ) => console.log("Server started"))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input id="input" type="text">
<button id="get">Get</button>
</form>
<p id="message">
The message will go here
</p>
</body>
<script>
const input = document.getElementById("input")
const getbtn = document.getElementById("get")
getbtn.addEventListener("click", getInfo);
async function getInfo() {
const response = await fetch('http://localhost:8383/info');
return await response.json();
}
getInfo().then(info => {
document.getElementById('message').textContent = JSON.stringify(info);
});
</script>
</html>
Result - ran GO Live extension in VS.code and node server.js
Im trying to create simple node.js server for html using http and express
It's working, but css don't showing
Here is code of my server
const express = require("express");
const app = express();
app.use(express.static("css"));
var router = express.Router()
app.use('/',router)
router.get("/", (req, res) => {
res.sendFile(__dirname + "/index.htm")
})
app.listen(8080)
And code of my server, what created using http
const http = require("http")
const port = 8080
const fs = require('fs')
const server = http.createServer(function(req,res) {
fs.readFile('./index.html', (error, data) => {
if(error) {
res.writeHead("404")
res.write("Error. File not found.")
} else {
res.use
res.write(data)
}
res.end();
})
})
server.listen(port, function(error) {
if(error) {
console.log(error)
} else {
console.log("server is listening on port " + port)
}
})
all my html code
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Domodinak</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>
also css
body {
background-color: deeppink;
}
if you know how to help me, please help :)
Make sure that you're addressing css folder correctly. It depends on your project folder structure. It is suggested to save your static files in a folder called public and then save your files in separated folder like js and css. For example, i assume that you have a src folder which is your directory for express server file, another folder alongside the src folder, you have a public folder with css subfolder.
Put your stylesheet file in css subfolder, and html file in just public folder and then change your code to this:
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "../public")));
// var router = express.Router()
// app.use('/',router)
// router.get("/", (req, res) => {
// res.sendFile(__dirname + "/index.htm")
// })
app.listen(8080)
Your project structure should looks like this:
|-public -| css -| style.css
index.html
|-src -| app.js
Run the server file then check your browser with just localhost:8080. It serves index.html from static directory which you passed to express earlier.
So I'm trying to use values in my json file to display on the webpage. For instance, one value will be the text on the accordion button.
I'm using express and ejs, and I've been trying to use <%- %> to call the text in the json file but it won't seem to appear on the webpage.
index.js
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res) {
res.locals.ClinNotes1=('.\ClinNotes.json');
res.render('webpage');
})
webpage.ejs
<div id="Problems" class="tabcontent">
<div class="problemItems">
<button class="accordion" id="accordionDis">
<span><ul><%-ClinNotes1.resourceType%></ul></span>
ClinNotes.json
{ "resourceType": "Bundle",
....}
If you want to show your JSON data on your webpage you can do something like that:
index.js
//here import your json file
const notes = require('./ClinNotes.json'); //suppose your file is in the root directory
app.get('/', function(req, res) {
res.render('webpage', {data: notes});
})
webpage.ejs
<span><ul><%-data.resourceType%></ul></span>
Hopefully, it might help you
Here is a quick example I put together.
Basically, you want to iterate over the JSON file the same way you would a Javascript object.
app.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
//Use EJS Templating Engine
app.set('view engine', 'ejs');
app.get('/', (req, res, next) => {
res.locals.dataFromJSON = require('./data.json');
res.render('index');
});
//Start Server
app.listen(port, () => {
console.log(`Server started on port number ${port}`);
});
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example</title>
</head>
<body>
<h1>Hope this helps!</h1>
<% Object.values(dataFromJSON).forEach((value) => { %>
<button><%= value %></button>
<% }); %>
</body>
</html>
data.json
{
"resourceType": "Bundle",
"resourceType2": "Bundle2",
"resourceType3": "Bundle3",
"resourceType4": "Bundle4"
}
Here is a gitub repo i created
Here is the expected output deployed to heroku
I hope this helps! 👍
I am using Angular6, trying to serve json data from a google map API to make ajax calls to Node.js with MongoDB, I have a form for placing markers on a google map using the api, I am trying to set up node js to take in the json data so that it is not being stored on the local storage, I have being following tutorials trying to set up Node.js to work with express and to store the places.
Using express: "^4.16.3", mongodb: "^3.1.1",
I have created the dist folder with all of the relevant files and I have also created my server folder with route folder and api.js, also I have my server.js, I think that I have all in place but I keep getting this error in my console when I run it on the local host 3000,
this is the error that is showing up in my google chrome console
When I run http://localhost:3000/api it displays that the text 'api works'
This is my Server.js
// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
// Get our API routes
const api = require('./server/routes/api');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/mapit/index.html'));
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3000';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
This is my api.js
const express = require('express');
const router = express.Router();
/* GET api listing. */
router.get('/', (req, res) => {
res.send('api works');
});
module.exports = router;
This is my index.html in my dist folder
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mapit</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/4/simplex/bootstrap.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js">
</script><script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
I think you have the following problem, you don't call next on your middleware and thus the HTML file cannot be send. You also try to call res.send() twice which you shouldn't do, express can only send one response. I suggest you change your api the following:
router.get('/', (req, res, next) => {
console.log('api works');
next();
});
Now the api works will logged in the terminal (nodejs) and not the browser console and the HTML should be send succesful.
Hopefully helps you!
Try app.use(express.static(path.join(__dirname, 'dist/mapit')));
Difference is using 'dist/mapit' instead of only 'dist'.
Where have you placed your server.js file? I was seeing the same issue when I had my server.js within the DIST folder.
I moved the server.js file up one level so it is in the parent directory of the DIST folder and my site files css/js etc all loaded as expected.
I need to get query values which will be routed to ejs file. I am able to do that using data:rows. However, this gives solution:Sandy. I only need Sandy. Below, I am pushing the values i.e. rows[i] using for loop into array arr, however, only the last element stays in the array. I tried using forEach loop which is giving syntax error. Any ideas/help would be highly appreciated!
main.js
const express = require('express')
const app = express()
var router = express.Router()
app.set('view engine', 'ejs');
var arr = [];
var mysql = require('mysql')
var connection = mysql.createConnection({
host : 'host',
port : 'port',
user : 'user',
password : 'password',
database : 'database'
});
connection.connect()
connection.query('SELECT customer_name as solution FROM customers', function (err, rows, fields) {
if (err) throw err
for(var i in rows){
arr.push[rows[i].solution];
}
app.get('/', function(req, res) {
res.render('index', {data:arr});
});
})
app.listen(3000, () => console.log('Example app listening on port 3000!'));
index.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<<h1><%= data %></h1>
</body>
</html>
Your query should be executed when the users hit the / route, this way they will always receive updated data from the server, also there is no need to create another array, you can just pass the query result to ejs and then loop through it:
main.js
const express = require('express')
const app = express()
var mysql = require('mysql')
app.set('view engine', 'ejs');
var connection = mysql.createConnection({
host : 'host',
port : 'port',
user : 'user',
password : 'password',
database : 'database'
});
connection.connect();
app.get('/', function(req, res) {
connection.query('SELECT customer_name as solution FROM customers', function (err, rows, fields) {
if (err) throw err;
res.render('index', { data: rows });
});
});
index.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<% for ( var i = 0; i < data.length; i++) { %>
<h1><% data[i].solution %></h1>
<% } %>
</body>
</html>