How to display JSON file with Node.JS/Express - mysql

I'm VERY new to Node.js... so this is probably going to be stupid, basic. Here is what I am trying to do: I want to create a Node.js app that will query my MySQL database and return a JSON file to the user.
So far I have very little :) I have a project created with Webstorm. I have an index.js file and an index.ejs file. The index.js file has the following:
var express = require('express');
var router = express.Router();
var appdata = require('../data.json');
var mysql = require('mysql');
// http://nodejs.org/docs/v0.6.5/api/fs.html#fs.writeFile
var fs = require('fs');
var connection = mysql.createConnection({
host: 'xxxxxx',
user: 'xxxxx',
password: 'xxxxx'
database: 'xxxxx';
});
connection.connect();
router.get('/', function(request,response) {
connection.query('select AProgram_UID as UID, SiteDescription as Program, IcStatus as Status from AP_Details;', function (err, results, fields) {
if (err) {
console.log('Error in Query', err.message);
return response.send(500, err.message);
};
return JSON.stringify(results);
connection.end();
});
});
I haven't defined what goes in the index.ejs file because I really don't know where to go from here. I can write the JSON out to file from the code shown if I use writeFile, so I know the database part is correct.
Hopefully I explained enough... as mentioned, I'm new to Node. I just want to do something 'real' with it and this is something I need on a project I have.
Thanks!

In your router.get callback return the JSON back to the requester by using res.json to properly assign the Content-Type header to application/json and stringify whatever is passed to it.
Also you want to remove your return statements to before connection.end() otherwise connection.end() will never be called.
router.get('/', function(req, res) {
connection.query('select AProgram_UID as UID, SiteDescription as Program, IcStatus as Status from AP_Details;', function (err, results, fields) {
if (err) {
console.log('Error in Query', err.message);
res.status(500).send(err.message);
}
else
// render index view and pass in results JSON
res.json(results);
return connection.end()
});
});
Edit to use EJS View Engine Rendering
In order to use EJS you need to have your View Engine set to EJS and have a default Views directory setup. In your main Express server file it should look something like this before any routes
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
You'll need to change the code above from using res.json to use res.render. You'll also need to pass your results into the render function so the index.ejs can access the results JSON
res.render('index', { results: results });
In your index.ejs file you can access results using the EJS markup syntax
<html>
<body>
<p><% results %></p>
</body>
</html>

Related

How to render html code stored as string?

Hi I am trying to send the contents of string stored in mongo db through res.render. However, if I check after sending this string, the tag appears in the form of a string and does not appear in html, so I want to know how to solve it.
router.get("/:id", async function (req, res) {
var article = await Article.findById(req.params.id);
console.log(article);
res.setHeader("Content-type", "text/html");
res.render("articles/article", { article: article });
});
article = "<p>내용입니다.</p>"
here is the working example. You have to install the pug template engine or any other template engine. See the test. pug file and note that if the variable is HTML content then we have to use the syntax "!{para}" or if the variable is a simple string then we can use the syntax "#{para}".
so the folder structure would be like
app.js
views ->test.pug
// app.js file
var express = require('express');
var app = express();
var PORT = 3000;
app.set('view engine', 'pug');
app.use('/', function(req, res, next){
res.render('test', {para : `<p>This is paragraph</p>`});
});
app.listen(PORT, function(err){
if (err) console.log(err);
console.log("Server listening on PORT", PORT);
});
// html file test.pug
<div>!{para}</div>

Post an array into MySQL Workbench with Express.js api and mysql package

I'm working with Express.js and mysql package to create my apis, but i can't make a post.
This is my code so far:
const express = require('express');
const mysql = require('mysql');
const config = mysql.createConnection({
host: theHost,
port: thePort,
user: theUser,
password: thePass,
database: theDB,
});
const app = express();
config.connect(function(err){
if(!err) {
console.log("Success");
} else {
console.log("Error trying to connect");
}
});
app.get("/api/InternalAccess", function(req, res){
config.query('SELECT * from InternalAccess', (error, result) => {
if (error) throw error;
res.send(result);
});
});
app.post("/api/internalAccess", function(req, res){
var info = { User: req.body.User, Password: req.body.Password, CreationDate: req.body.CreationDate };
config.query('INSERT INTO InternalAccess SET ?', info, (error, result) => {
if (error) throw error;
res.send(result);
});
});
app.listen(3000);
I have no problems with get, it works fine, but to make post from postman, i get the error: " Cannot read property "User" of undefined". Am i avoiding something? I'm really new using mysql package.
My db is MySQL Workbench, and as i said, i'm using Node.js, Express.js and mysql package.
Hope you can help me. Thanks in advance
In order to have req.body populated automatically, you have to use some body-parser middlewares, like:
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
Of course, there can be multiple other causes (like, you're not constructing the request properly in postman), but the lack of setting the middlewares is the first place I'd fix.
Seems like req.body is null. I think you might just be missing the body-parser in your app.js.
var bodyParser = require('body-parser');
var app = express();
// parse application/json
app.use(bodyParser.json())
see other examples here: https://expressjs.com/en/resources/middleware/body-parser.html

HTML is being sent instead of JSON Data

I'm trying to retrieve data from a SQL database and display that said data on a Reactjs web app. However, all the calls I make to the database results in the HTML of the webpage in focus. I have set the headers, and I've tried to change the way the response from the express call is being handled.
Here is the expressjs script I am using right now:
const express = require('express');
const sql = require('mssql/msnodesqlv8');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');
const db = require('./db.js');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use('/counselling/triageadmin/', express.static(path.join(__dirname, '/build')));
app.use(cors());
app.get('/getTable', function (req, res, next){
var request = new sql.Request(db);
request.query('select * from Counselling order by TicketID desc', (err, result) =>{
if (err) { return next(err); }
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(result["recordset"]));
});
});
From there, my axios calls look like this:
componentWillMount(){
let self = this;
axios.get("/getTable")
.then(function (response){
console.log(response.data);
self.setState({
data: response.data,
});
})
.catch(function (error){
console.log(error);
})
}
I added the console.log to check what was being returned, and as said, it was the HTML code of the current page of focus.
I made some changes to reflect what steps I took to get the 500 issue out. The current code, however, results in a 404.
If you move your get on top of your put it should work. The problem seems to be that the static clause resolves your request before it gets to your endpoint, so if you do this:
app.get('/counselling/triageadmin/getTable', function (req, res, next){
var request = new sql.Request(db);
request.query('select * from Counselling order by TicketID desc', (err, result) =>{
if (err) { return next(err); }
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(result["recordset"]));
});
});
app.use('/counselling/triageadmin/', express.static(path.join(__dirname, '/build')));
the path to the get will attempt to be matched before you're routed to your static files.
Ideally you would want to have your rest endpoints under a different namespace, i.e. /api but if you decide to keep your setup, this should help.
I think your routes might be conflicting with each other. From the express documentation at: http://expressjs.com/en/4x/api.html#app.use
// this middleware will not allow the request to go beyond it
app.use(function(req, res, next) {
res.send('Hello World');
});
// requests will never reach this route
app.get('/', function (req, res) {
res.send('Welcome');
});
Thus, your route '/counselling/triageadmin/getTable' will never be reached, because your route '/counselling/triageadmin/' is intercepting it, responding with static resources.
To solve this, try organizing your routes in a way that puts all of your API requests at a different subfolder, like '/api'. So your getTable endpoint would be located at: '/api/counselling/triageadmin/getTable/' or something like that.
I'm also learning the MEAN stack and I stumbled upon your question since I had the opposite problem. I wanted it to respond with an HTML instead of a JSON
this line of code MAKES it respond with an HTML
res.send(JSON.stringify(result["recordset"]));
(I tried res.send("<h3 HTML T_T </h3>");) and it did send and HTML
however, if you try
res.json(String(req.params.id)); <= Notice the res.json instead of res.send
It responds with a JSON :)
I hope this helped

Getting data from MySql through express

I've set up a database on Heroku and I've created a table called users with 2 records, and now I'm trying to get the data into my Node application through express.
I've set up an connection like so in my app.js file:
// connect to the heroku database
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'us-cdbr-iron-***-**.cleardb.net',
user : 'bfe4***0ede74',
password : '6742****',
database : 'heroku_****ee0f0e9102'
});
I then have a routes folder with an index.js file:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
// res.render('layout', { title: 'Movieseat' });
connection.connect();
connection.query('SELECT * FROM `users` WHERE `first_name` = "Kees"', function (error, results, fields) {
// error will be an Error if one occurred during the query
// results will contain the results of the query
// fields will contain information about the returned results fields (if any)
console.log(results);
});
connection.end();
});
module.exports = router;
In this index route I'm trying to serve the record of first_name Kees. But when I visit my host I get the following error:
connection is not defined
ReferenceError: connection is not defined
So it looks like connection has no reference in my route file, but in my WebStorm IDE when I ctrl + click on the connection I get my app.js file where I define my connection. So how do I reference connection in my route file?
Also when I uncomment the following line in my index.js route file:
res.render('layout', { title: 'Movieseat' });
I get the error:
Error: Can't set headers after they are sent. What would be the propper way to request data and render a jade template?
The second error is likely because somewhere you're calling res.send() or res.end() or res.render() already, you just don't realize it. Check your middleware and so on to make sure you're not doing so.
The first issue is because you're neither exporting the connection object from your connection file, nor requiring it in your router file. You always have to explicitly require a module in order to have reference to it.
// connect to the heroku database
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'us-cdbr-iron-***-**.cleardb.net',
user : 'bfe4***0ede74',
password : '6742****',
database : 'heroku_****ee0f0e9102'
});
module.exports = connection;
NOte that in that case, you will always have the same connection, which isn't great for scalability. Have a look at connection pooling and consider exporting a method that gets the connection rather than passing around a global object.
Then in your router:
var express = require('express');
var router = express.Router();
var connection = require('./path/to/your/connection.js');
/* GET home page. */
router.get('/', function(req, res, next) {
// res.render('layout', { title: 'Movieseat' });
connection.connect();
connection.query('SELECT * FROM `users` WHERE `first_name` = "Kees"', function (error, results, fields) {
// error will be an Error if one occurred during the query
// results will contain the results of the query
// fields will contain information about the returned results fields (if any)
console.log(results);
});
connection.end();
});
module.exports = router;

what's the best way to send a variable using method get with express, mysql and node.js

I'm building a web site using node.js express MySQL and boostrap, when I try to send a variable against method get for to do a query to the database, it's seem doesn't work, because there's no a good render. this is my code:
app.get('/reservaciones/leer/:id', function(req, res) {
var idreservacion = req.params.idreservacion;
crud.get_leer_reservacion(req,idreservacion,function(data_leer){
res.render'../views/leer.html',data:data_leer});
});
});
exports.get_leer_reservacion = function(req,idreservacion,fn){
// here the query
connection.query('select * from reservacion where idreservacion = '"+idreservacion+"'', function(err,rows){
if(err){
throw err;
}
return fn(rows);
});
};
https://drive.google.com/folderview?id=0BxFTEy90zOKAfmJOXzR3NDFLa081NUtEUFU4LWhuN2ZUTDMtVktPeHlYbVUzWW02a2pGWEk&usp=sharing
res.render'../views/leer.html',data:data_leer});
should be:
(outside of app.get:)
app.use('views', '../views');
(inside:)
res.render('leer',{data:data_leer});
If your problem is actually getting the templated data into the page I suggest the ejs npm package and templating system, you would use <%= data => to template in the value
In this code:
app.get('/reservaciones/leer/:id', function(req, res) {
var idreservacion = req.params.idreservacion;
You define a parameter called id, but you retrieve a parameter called idreservacion. Try something like this:
app.get('/reservaciones/leer/:id', function(req, res) {
var idreservacion = req.params.id;