I am getting data from mongodb and displaying on the routes but one of the routes does not work, below is my code:
routes:
const express = require('express');
const router = express.Router();
const data = require('../data');
const gymData = data.gyms;
router.get('/', async (req, res) => {
try {
let gymList = await gymData.getTopFive();
res.render('gymbars/gymlist',{gyms:gymList})
} catch (e) {
res.sendStatus(500);
}
});
router.get('/gymcreate',async(req,res) => {
try{
res.render('gymbars/creategym')
}
catch(e){
res.sendStatus(500);
}
});
module.exports = router;
index.js:
const gymRoutes = require('./gyms');
const constructorMethod = (app) => {
app.use('/gyms', gymRoutes);
app.use('*', (req, res) => {
res.status(404).json({ error: 'Not found' });
});
};
module.exports = constructorMethod;
handlebars creategym:
<div>
<h1> hello </h1>
</div>
The below route just throws internal server error whereas the other route works correctly
http://localhost:3000/gyms/gymcreate
I am not sure what I am doing wrong
Related
When I m trying to test my GET API using postman it returns 200 but with an empty body, The data I'm expecting to get do not show up.
Find my server.js file and the screenshot of POSTMAN result
app.get('/api/articles/:name', async (req, res) => {
try {
const articleName = req.params.name;
const client = await MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true });
const db = client.db('my-blog');
const articleInfo = await db.collection('articles').findOne({ name: articleName })
res.status(200).json(articleInfo)
client.close()
}
catch (error) {
res.status(500).json({ message: 'error connecting to db', error })
}
})
here i have updated your code as below and please move your server.js outside of /src folder. its working now.
const express = require('express')
const bodyParser = require('body-parser')
const {MongoClient} = require("mongodb");
const url = 'mongodb://127.0.0.1:27017';
const app = express();
app.use(bodyParser.json());
app.get('/api/articles/:name', async (req, res) => {
try {
const articleName = req.params.name;
MongoClient.connect(url, async (err, db) => {
const client = db.db('article');
const articleInfo = await client.collection('articles').findOne({title: articleName})
res.send(articleInfo)
});
} catch (error) {
res.status(500).json({ message: 'Error connecting to db', error });
}
});
app.listen(8000, () => console.log('Listening on port 8000'));
I am learning express.js, and I am thinking why I receive UnhandledPromiseRejectionWarning and no error response is being sent after executing http api call..
For error handling I have created helper class and middleware:
/helpers/errorHander.js
------------------------------------
class ErrorHandler extends Error {
constructor(statusCode, message) {
super();
this.statusCode = statusCode;
this.message = message;
}
}
const handleError = (err, res) => {
const { statusCode, message } = err;
res.status(statusCode).json({
status: 'error',
statusCode,
message
});
};
module.exports = {
ErrorHandler,
handleError
};
I have enabled this middleware in app.js file:
/app.js
------------------------------------
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const config = require('./config/init');
const cors = require('cors');
const { handleError, ErrorHandler } = require('./helpers/errorHandler');
//routes
const apiRoutes = require('./api');
// connect db
config.initializeDB();
// configure bodyParser
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Enable Cors
app.use(cors());
// Set Routes
app.use('/', apiRoutes);
app.get('/error', (req, res) => {
throw new ErrorHandler(500, 'Internal server error');
});
// Enable error handling middleware
app.use((err, req, res, next) => {
handleError(err, res);
});
module.exports = app;
When I perform request to the /error endpoint, it works correctly:
/error endpoint
But when performing request to the endpoint which performs operations with mongoose I am not getting desired result:
/v1/users/ endpoint
user.route.js:
const router = require('express').Router();
const userController = require('./user.controller');
router.get('/', userController.getUsers);
router.post('/', userController.createUser);
module.exports = router;
user.controller.js:
const userService = require('../../../services/user');
module.exports = {
getUsers: (req, res, next) => {
return res.json(userService.getUsers());
},
createUser: (req, res, next) => {
const username = req.body.username;
const password = req.body.password;
res.json(userService.createUser(username, password));
}
};
user.service.js:
const User = require('../models/user');
const { ErrorHandler } = require('../helpers/errorHandler');
module.exports = {
getUsers: async () => {
return User.find({});
},
createUser: async (username, password) => {
const user = new User({ username, password });
try {
await user.save();
return user;
} catch (err) {
if (err.code === 11000) {
throw new ErrorHandler(409, 'Username already exists!');
}
throw new ErrorHandler(500, 'Internal server error');
}
}
};
Console gives such a warning:
Console Output
Why it is not working as I want, and how can I make it work?
=========================================================
Update #1
As user - jfriend00 suggested, I tried to await the promise, and here my code looks like on user.controller.js:
const userService = require('../../../services/user');
module.exports = {
getUsers: (req, res, next) => {
return res.json(userService.getUsers());
},
createUser: async (req, res, next) => {
const username = req.body.username;
const password = req.body.password;
try {
let user = await userService.createUser(username, password);
} catch (err) {
next(err);
}
}
};
And Now I get the desired outcome.
On localhost:5000/posts my data is successfully showing but if I do the same thing in Heroku: https://rest-in-peep.herokuapp.com/posts I get an application error. https://rest-in-peep.herokuapp.com/ works fine and I deployed it through Heroku GIT. I made sure to config my environmental vars in Heroku and added a Procfile but I am still getting this application error. I've been trying all day to figure this out but what I expect to happen is if I type in https://rest-in-peep.herokuapp.com/posts, I will get all the data that is being stored on my MongoDB database.
app.js file
const http = require("http");
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");
require("dotenv/config");
const app = express();
const server = http.createServer(app);
//Middlewares
app.use(cors());
app.use(bodyParser.json());
//Import Routes
const postsRoute = require("./routes/posts");
app.use("/posts", postsRoute);
//ROUTES
app.get("/", (req, res) => {
res.send("We are on home");
});
//Connect to DB
mongoose.connect(
process.env.DB_CONNECTION,
{ useNewUrlParser: true },
() => console.log("connected to MongoDB")
);
//How do we start listening to the server
server.listen(process.env.PORT || 5000, () => {
console.log("App now running on PORT");
});
routes>
posts.js
const express = require("express");
const Post = require("../models/Posts");
const router = express.Router();
//GETS BACK ALL THE POSTS
router.get("/", async (req, res) => {
try {
const posts = await Post.find();
res.json(posts);
} catch (err) {
res.json({ message: err });
}
});
//SUBMITS A POST
router.post("/", async (req, res) => {
console.log(req);
const post = new Post({
quote: req.body.quote
});
try {
const savedPost = await post.save();
res.json(savedPost);
} catch (err) {
res.json({ message: err });
}
});
//SPECIFIC POST
router.get("/:postId", async (req, res) => {
try {
const post = await Post.findById(req.params.postId);
res.json(post);
} catch (err) {
res.json({ message: err });
}
});
//Delete Post
router.delete("/:postId", async (req, res) => {
try {
const removedPost = await Post.remove({ _id: req.params.postId });
res.json(removedPost);
} catch (err) {
res.json({ message: err });
}
});
//Update a post
router.patch("/:postId", async (req, res) => {
try {
const updatedPost = await Post.updateOne(
{ _id: req.params.postId },
{
$set: { quote: req.body.quote }
}
);
res.json(updatedPost);
} catch (err) {
res.json({ message: err });
}
});
module.exports = router;
gitignore
/node_modules
models>Posts.js
const mongoose = require("mongoose");
const PostSchema = mongoose.Schema({
quote: {
type: String,
required: true
}
});
module.exports = mongoose.model("Posts", PostSchema);
I have a database in Mlab that is MongoDB that has two collections and I am trying to make a POST endpoint to which I can post whatever a user has entered in a commentbox. However I am doing something wrong, because when I test my endpoint with Postman it says 404 that the endpoint is not found. Trying to post via the commentbox does not work too ofcourse. This is the url to my post endpoint:
https://astroecstatic-express.herokuapp.com/comments. However if I run this in the browser it displays an empty array, so how come I get a 404 error when trying to POST? What am I doing wrong and how can I make my POST endpoint? Here is my node.js server:
// Requiring the dependencies
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const PORT = process.env.PORT || 3001;
const itemRoutes = express.Router();
let Comment = require('./comment.model');
app.use(cors());
app.use(bodyParser.json());
mongoose.connect("mongodb://admin:SomeUSersecretpassword.mlab.com:41968/heroku_hc9xjmcl", { useNewUrlParser: true } )
const connection = mongoose.connection;
connection.once('open', function() {
console.log('Connection to MongoDB established succesfully!');
});
// Serve static assets
if(process.env.NODE_ENV === 'production') {
app.use(express.static('build'));
}
itemRoutes.route('/').get( async (req, res) => {
let collection = connection.collection("posts");
let response = await collection.find({})
.toArray();
res.send(response);
});
itemRoutes.route('/comments').get( async (req, res) => {
let collection = connection.collection("comments");
let response = await collection.find({})
.toArray();
res.send(response);
});
itemRoutes.route('/comments')
.post((req, res) => {
res.setHeader('Content-Type', 'application/json');
let comment = new Comment(req.body);
comment.save()
.then(comment => {
res.status(200).json({comment})
})
.catch(err => {
res.status(400).send('failed')
})
});
app.use('/', itemRoutes);
app.use('/comments', itemRoutes);
app.listen(PORT, function() {
console.log('Server is running on' + ' ' + PORT);
})
and my post component:
import React, { Component } from 'react';
import axios from 'axios';
class CommentBox extends Component {
constructor(props) {
super(props);
this.path = window.location.href;
this.postId = this.path.split("/").slice(-1)[0];
}
state = {
userComments: []
}
componentDidMount() {
const fetchPosts = async () => {
const res = await axios.get('https://astroecstatic-express.herokuapp.com/comments');
this.setState({...this.state, userComments: res.data})
};
fetchPosts();
}
getCommentData = (res) => {
let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
const commentContent = document.querySelector(".comment-box-container__div-comment-box").textContent;
axios.post('https://astroecstatic-express.herokuapp.com/comments', {title: commentContent, date: today, commentId: this.postId })
window.location.reload();
}
render() {
let currentPostComments = this.state.userComments.filter((item) => {
return item.commentId === this.postId
})
return(
<div className="comment-box-container">
<div className="comment-box-container__div">
<button className="comment-box-container__post-comment-btn" onClick={this.getCommentData}> Post Comment</button>
<div className="comment-box-container__div-comment-box" contentEditable="true"></div>
</div>
<div className="comment-box-container__show-coments-section">
{currentPostComments.map(comment =>
<section>
<h3>{comment.date}</h3>
{comment.title}
</section>
)}
</div>
</div>
)
}
}
export default CommentBox;
Here's a simple way to create both a .get() and a .post() route for /comments on a router:
itemRoutes.get("/comments", function(req, res, next) {
// code here
});
itemRoutes.post("/comments", function(req, res, next) {
// code here
});
app.use(itemRoutes);
You can also use .route() instead like this:
itemRoutes.route("/comments").get(function(req, res, next) {
// code here
}).post(function(req, res, next) {
// code here
});
app.use(itemRoutes);
And, you don't even really have a compelling case for using a router for these two routes. You could also just do:
app.get("/comments", ...);
app.post("/comments", ...);
Or
app.route("/comments")
.get(...)
.post(...);
And, not even use a router for just two top level routes.
I figured out how to make a request to SQL server and post as JSON on the server side. I'm wondering how I can pull that data into the react side.
Server.js:
let pullTable = require('./actions/pullTable.js');
var express = require('express');
var app = express();
app.get('/', async (req, res, next) => {
try {
const result = await pullTable.pullTable();
return res.status(200).json(result);
} catch (error) {
next(error);
}
});
app.listen(5000, () => {console.log('Server is running..')});
SQL Request - pullTable.js:
var sql = require("mssql");
var express = require('express');
var app = express();
// config for your database
var config = {
user: 'user',
password: 'pass',
server: 'localhost',
database: 'Master'
};
const pullTable = async () => {
try {
const pool = await sql.connect(config);
const sqlQuery = 'SELECT * FROM Persons';
const result = await pool.request().query(sqlQuery);
return result.recordset;
} catch (err) {
throw err;
}
};
exports.pullTable = pullTable;
The code works fine up to here. I look at port 5000 and can see the JSON data being displayed from my server. Just not sure how to get this into React. This is my attempt at the react side (not including the App.js file - don't need help with that):
getData.js:
import React, { Component } from 'react';
class getData extends Component {
constructor(){
super();
this.state={
data:[],
}
}
componentDidMount(){
fetch('http://localhost:5000')
.then((Response)=>Response.json())
.then((findresponse)=>
{
this.setState({
data:findresponse,
});
});
}
render() {
return (
<div>
{
this.state.data.map((dynamicData)=>
<div>
<span>{dynamicData.LastName} </span>
<span>{dynamicData.FirstName}</span>
</div>
)
}
</div>
);
}
}
export default getData;
Just looking to display the first and last name of people in that SQL table.
#Shawn Yap pointed me in the right direction. Basically had to include the Access-Control-Allow-Origin header on the server script:
let pullTable = require('./actions/pullTable.js');
var express = require('express');
var app = express();
app.get('/', async (req, res, next) => {
try {
res.set('Access-Control-Allow-Origin', '*');
const result = await pullTable.pullTable();
return res.status(200).json(result);
} catch (error) {
next(error);
}
});
app.listen(5000, () => {console.log('Server is running..')});
Not sure if this even good code, but it's working.