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! 👍
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
I am trying to render a static HTML page located in the views directory but when I try to visit that route, the Node.js console firing an error.
Error message
TypeError: path must be absolute or specify root to res.sendFile
at ServerResponse.sendFile (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\response.js:425:11)
at C:\Users\Administrator\Desktop\node-mvc-setup\app.js:21:7
at Layer.handle [as handle_request] (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\express\lib\router\index.js:275:10)
at urlencodedParser (C:\Users\Administrator\Desktop\node-mvc-setup\node_modules\body-parser\lib\types\urlencoded.js:91:7)
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Node MVC Front Page</title>
</head>
<body>
<h1>Great index font page</h1>
</body>
</html>
Index route
const express = require("express");
//require the express router
const router = express.Router();
router.get("/", function(req, res, next) {
res.sendFile("/views/index.html");
});
module.exports = router;
Can you require path module in your code and try doing this instead:
router.get("/", function(req, res, next) {
res.sendFile(path.join(__dirname, '../views', 'index.html'));
});
//require path
const path = require('path');
//require express
const express = require("express");
//require express router
const router = express.Router();
router.get("/", function(req, res, next) {
res.sendFile(path.join(__dirname, '../', 'views', 'index.html'));
});
module.exports = router
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.
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");
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>