We Keep Coding

Why node js middleware using Express after successful authorization does not call given API?

I have below setup to call API with middleware to authorize it before success.
Calling API with token id with header object using jquery ajax,
$.ajax({
url : '/api/auth/fetchMycontent',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
cache: false,
context: this,
headers: {
"X-Access-Token": tokenId
},
data: JSON.stringify({
accountId: accountId
}),
success: function(data){
//render data in HTML
}
});
Setting node server as below,
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
// Add your middlewares:
var middleware = require("middlewares");
app.use(bodyParser.json());
app.all('/api/auth/*', middleware.apiValidate);
app.use('/', require('./modelApi'));
...
setting API in modelApi/index.js,
var express = require('express'),
router = express.Router(),
api = require('../api.js'),
router.post('/api/auth/fetchMycontent', api.fetchMycontent);
module.exports = router;
middleware.js file will be like
module.exports = {
apiValidate: function (req, res, next) {
var token = req.body.x_access_token;
if (token) {
elastic.fetchToken(table, token).then(function (data) {
if (data.hits.total > 0) {
**//authorization success but next() fails here <------**
next();
} else {
res.json({
message: "Invalid User access!!",
});
return;
}
});
}
},
};
From api.js,fetchMycontent function will be like
fetchMycontent : function(req, res) {
**console.log('not reaching after authorization success !!!')**
elastic.fectMycontent(table, req.body).then(function (data) {
res.set('Content-Type', 'application/json');
res.status(200);
res.send(data);
})
}
When i call api 'fetchMycontent', it calls middleware as expected and authorize it and does not call fetchMycontent()!!! What am i missing here? Please advise
Thanks in advance

I think you are missing to extend like
export class AuthenticationMiddleware implements ExpressMiddlewareInterface
and implement the use function
use(req, res, next)

Base url was added with two slash, Fixed by removing one / and it is working fine.

How to send input field value to Node JS backend via AJAX call for typeahead functionality

I am trying to implement a typeahead functionality as below.
html page
...
...
<input id="product" name="product" type="text" class="form-control" placeholder="Enter Product Name" autocomplete="off">
...
...
<script>
$(document).ready(function () {
fetchTypeAheadResult();
});
function fetchTypeAheadResult() {
$('#product').typeahead({
source: function (request, response) {
var formData = {
'product' : $('#product').val()
}
// var formData = $('form').serialize();
$.ajax({
url: "/search",
dataType: "json",
type: "POST",
data: formData,
contentType: "application/json; charset=utf-8",
success: function (result) {
var items = [];
response($.map(result, function (item) {
items.push(item.name);
}))
response(items);
// SET THE WIDTH AND HEIGHT OF UI AS "auto" ALONG WITH FONT.
// YOU CAN CUSTOMIZE ITS PROPERTIES.
$(".dropdown-menu").css("width", "100%");
$(".dropdown-menu").css("height", "auto");
$(".dropdown-menu").css("font", "12px Verdana");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
hint: true, // SHOW HINT (DEFAULT IS "true").
highlight: true, // HIGHLIGHT (SET <strong> or <b> BOLD). DEFAULT IS "true".
minLength: 1 // MINIMUM 1 CHARACTER TO START WITH.
});
}
</script>
...
...
And my back end node js code is as following
'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express();
// configure the app to use bodyParser() to extract body from request.
app.use(bodyParser.urlencoded({ extended: true }));
// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }));
app.post('/search', (req, res) => {
let searchText = req.body;
console.log('Search string >> ' + req);
console.log('Search string >> ' + JSON.stringify(req.body));
console.log('Search string >> ' + req.body.product);
// Not correct, but still trying if it works
// var result = triestrct.get(req.body.product);
res.send({test:'text'}); // TODO - to be updated with correct json
});
Now whenever I am trying to type on the "product" text field, it is invoking the back end /search api. However, I am unable to capture the value of product field.
Any help will be appreciated ? Note, I need typeahed functionality with ajax call to send input text value to back end.
Output of the three consol logs as following...
Search string >> [object Object]
Search string >> {}
Search string >> undefined

express doesn't parse the input provided to API by it self. Thus we need some additional tool like body-parser to fetch input from request and format it into JSON. This can be done without body-parser too.
Do go through this documentation it covers a lot.
Using body-parser, you need to setup body-parser with express:
```
const bodyParser = require('body-parser'),
// For Cross-Origin Resource Sharing
CORS = require('cors'),
express = require('express');
const app = express();
// Cross-Origin Resource Sharing
app.use(CORS());
// configure the app to use bodyParser() to extract body from request.
// parse urlencoded types to JSON
app.use(bodyParser.urlencoded({
extended: true
}));
// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }));
// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));
// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }));
// This will get you input at `req.body`
app.post('/search',(req,res)=>{
console.log(JSON.stringify(req.body));
});
```
Without using body-parser:
```
app.post('/', (req, res, next) => {
let body = [];
req.on('error', (err) => {
console.error(err);
}).on('data', (chunk) => {
// Without parsing data it's present in chunks.
body.push(chunk);
}).on('end', () => {
// Finally converting data into readable form
body = Buffer.concat(body).toString();
console.log(body);
// Setting input back into request, just same what body-parser do.
req.body = body;
next();
});
}, (req, res) => {
console.log(req.body);
});
```

req.body.product not req.query.product
IN POST verb use body-parser midlleware
const bodyParser = requier('body-parser');
const express = require('express');
const app = new express();
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
app.post('/search',(req,res)=>{
console.log(JSON.stringify(req.body));
});
I did not use typeahead before but this example is clear.

Ajax fails when sending a data object to the NodeJs server

when pressing a button this code gets executed
function submitData() {
$.ajax({
type: 'GET',
url: '/questionnaire/submit', // listen to a route
dataType: "json",
data: JSON.stringify({ // some test data
satisfactory: "house",
improvement: "bla",
rating: "this is a text"
})
}).done(function () {
$(location).attr('href', '/sendOff'); // redirect to another route
}).fail(function () {
console.log("Error");
});
}
and the server is listening on this
app.get('/questionnaire/submit', function (req, res) {
var data = req.query; // Get the data object from the Ajax call
console.log(data);
res.send(null); // Send nothing back
});
Whenever pressing the button, "Error" gets logged in the console. The Ajax call always fails.
Even when writing res.send("Success"); the client will log "Error". What am I missing?
Update:
I installed the body parser middleware and use this code now
my app.js
const path = require('path');
const express = require('express');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
const handlebars = exphbs.create({
defaultLayout: 'index',
extname: 'hbs'
});
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
require('./Server/Routes/questionnaire')(app);
require('./Server/Routes/sendOff')(app);
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'Public')));
app.listen(8888, function () {
console.log('Server running on port 8888');
});
my route
module.exports = function (app) {
app.get('/questionnaire', function (req, res) {
res.render('questionnaire');
});
app.post('/questionnaire/submit', function (req, res) {
var data = req.body;
console.log(data);
res.send(null);
});
};
and my client function
function submitData() {
$.ajax({
type: 'POST',
url: '/questionnaire/submit',
dataType: "json",
data: JSON.stringify({
satisfactory: $("#edtSatisfactory").val(),
improvement: $("#edtImprovement").val(),
rating: currentRating / ratingElements.length
})
}).done(function () {
$(location).attr('href', '/sendOff');
}).fail(function () {
});
}
And when executing the Ajax call the client still runs into .fail()

Client request is :
function submitData() {
$.ajax({
type: 'POST',
url: '/questionnaire/submit', // listen to a route
dataType: "json",
data: {
satisfactory: "house",
improvement: "bla",
rating: "this is a text"
}
}).done(function () {
$(location).attr('href', '/sendOff'); // redirect to another route
}).fail(function () {
console.log("Error");
});
}
and the server is listening on this Using bodyParser middleware in your node backend
:
app.post('/questionnaire/submit', function (req, res) {
var data = req.body; // Get the data object from the Ajax call
console.log(data);
res.end(); // Send nothing back
});

You're using a GET http method, which shouldn't take body, you should instead append your data to the back of the url. Or if you want to use a body, then switch to a POST.
url: '/questionnaire/submit?satisfactory=house&improvement=bla&rating=sometext
If you're using POST don't forget:
'Content-Type': 'application/json',
Edit: On the server you need to parse the JSON request, this is best done with a middleware called body-parser:
npm install --save body-parser
const bodyParser = require('body-parser');
app.use(bodyParser.json());
This will parse your JSON and add it to req.body.

Try this..
Client Side
function submitData() {
$.ajax({
type: 'POST',
url: '/questionnaire/submit', // listen to a route
'Content-Type': 'application/json',
data: JSON.stringify({"satisfactory": "house", "improvement": "bla", "rating": "this is a text"})
}).done(function () {
console.log('hi')
}).fail(function () {
console.log("Error");
});
}
On server Side:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.post('/questionnaire/submit', function (req, res) {
var data = req.body
console.log(data);
res.send(null); // Send nothing back
});
You have to install body-parser library using following command.
npm install --save body-parser
It will log "Hi" as ajax done is called. BTW You have redirected the page to 'sendOff' in your question.
If you are not understanding anything plz comment below.

You just have to replace
dataType: "json",
with this:
'Content-Type': 'application/json'
in $.ajax request
Hope this will work.. I have tried & tested.

How do I parse my JSON with external middleware now that Express doesn't carry a body parser?

How do I parse my JSON with external middleware now that Express doesn't carry a body parser?
For a while, I was using Express bodyParser to receive and respond to JSON posts to the server. Each time I started up the server, express said something about bodyParser being removed soon, and sure enough, I've updated and now JSON requests seem to be showing null.
So I didn't understand how middleware worked, and had followed an express tutorial to use the body parser. Now, using separate body parser middleware, it seems I'm doing it wrong.
Before, my syntax was:
app.use(express.bodyParser());
Now, with the module body-parser as middleware, it's like this:
app.use(bodyParser.json());
And an example as a whole:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
function listen() {
app.use(bodyParser.json());
app.post('/login', function (req, res) {
var username = req.body.username;
var password = req.body.password;
console.log('User ' + username + ' is attempting login...');
validate(username, password, function (err, result) {
if (err) loginFail(req, res, err);
else loginSucceed(req, res, result);
});
});
app.listen(3333);
}
listen();
I tried express.json() as the middleware, but that triggers the fatal error:
Error: Most middleware (like json) is no longer bundled with Express
and must be installed separately. Please see
https://github.com/senchalabs/connect#middleware.
That link leads to the body-parser middleware that I'm using via app.use(bodyParser.json()).
Update:
Using bodyParser.json() results in no error, but the data values are null:
User undefined is attempting login...
My client code should be fine, but here it is for completeness:
function sendLogin() {
popLogCreds(creds);
var loginCredentials = {
"username": creds.username,
"password": creds.password
};
console.log("Sending login credentials: " +
JSON.stringify(loginCredentials, null, 4));
request = $.ajax({
url: "http://54.186.131.77:3333/login",
type: "POST",
crossDomain: true,
data: loginCredentials,
dataType: "json",
error: function () {
postError("Uh Oh! The Officeball server is down.");
},
success: function (data) {
var ParsedData = data;
sessionStorage.username = creds.username;
sessionStorage.password = creds.password;
sessionStorage.fname = ParsedData.fname;
sessionStorage.lname = ParsedData.lname;
sessionStorage.rank = ParsedData.rank;
console.log(sessionStorage);
window.location.replace("app.html");
}
});
}
Which results in:
Sending login credentials: {
"username": "jonathan#evisiion.com",
"password": "J******!"
}
And then the result is the POST's error output, which is, as above:
error : function () {
postError("Uh Oh! The Officeball server is down.");
}
Don't take that error message literally. Just means an error happened. The server is, in fact, getting that request, as shown up above.

By default, $.ajax() sends data URL-encoded as mentioned in the description of the processData option:
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded".
The body-parser that corresponds to that Content-Type and format is urlencoded():
app.use(bodyParser.urlencoded());
If you'd rather use JSON for the request, you'll need to provide the data already formatted as such along with a matching contentType that bodyParser.json() recognizes:
request = $.ajax({
url: "http://54.186.131.77:3333/login",
type: "POST",
crossDomain: true,
data: JSON.stringify(loginCredentials),
contentType: 'application/json',
dataType: 'json'
// ...
});
Note for cross-domain: With these modifications, the server will have to handle preflight OPTIONS requests for the route.
And, note that a bodyParser isn't needed for HEAD or GET requests as the data is included in the URL rather than the body. Express parses that separately into req.query.

In your node code,
make sure you put these two lines of code
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
......then your other code follows..
enjoy...

AJAX call to/from MongoDB example for Node/Express?

This is to start with a very basic page: HTML Form, a button, and a div-box.
.click of the button would POST the Form data through AJAX.
The data is to be stored in MongoDB, and retrieved into the div-box without a page-refresh.
AJAX from index.html:
$(document).ready(function()
{
// handle button clicks
$('#buttonID').click(function() {
// make an ajax call
$.ajax({
dataType: 'jsonp',
jsonpCallback: '_wrapper',
data: $('#formID').serialize(),
type: 'POST',
url: "http://localhost:9999/start",
success: handleButtonResponse,
});
});
function handleButtonResponse(data)
{
// parse the json string
var jsonObject = JSON.parse(data);
$('#reponseID').append( jsonObject.message );
}
});
app.js:
var express = require('express'),
app = express();
cons = require('consolidate');
MongoClient = require('mongodb').MongoClient,
Server = require('mongodb').Server;
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + "/views");
var mongoclient = new MongoClient(new Server('localhost', 27017,
{ 'native_parser' : true }));
var db = mongoclient.db('database_name');
app.get('/', function (req, res) {
db.collection('collectionName').find({}, function (err, doc) {
res.render('index', doc);
});
response.writeHead(200, {"Content-Type:": "application/json"});
var submittedPost = {};
submittedPost['message'] = 'Proof that Node and Mongo are working..';
response.write( "_wrapper('" );
response.write( JSON.stringify(submittedPost) );
response.write( "')");
response.end();
});
app.get('*', function (req, res) {
res.send("404..", 404);
});
mongoclient.open(function (err, mongoclient) {
if (err) throw err
app.listen(9999);
console.log("Express server started on port 9999");
});
How/Where does the JSON connect to/from MongoDB?
Also, does Express require a templating engine, such as Consolidate? If so, how/where does that fit in?

Few suggestions
Regarding the ajax call in index.html
If your index.html is served by the same server, then please don't use a cross domain call. The url property in $.ajax could be a relative url like /start.
Also you can think of not using jsonp request.
the call could be like
$.ajax({
dataType: 'json',
data: $('#formID').serialize(),
type: 'POST',
url: "./start",
success: handleButtonResponse,
});
How/Where does the JSON connect to/from MongoDB?
In you ajax call you are requesting for ./start, So the same route should be made in your express server. like
app.get('/start', function (req, res) {
db.collection('collectionName').insert({req.data}, function (err, doc) {
//rest of code
});
});
does Express require a templating engine, such as Consolidate? If so, how/where does that fit in?
You have many options for templating like jade,ejs,hbs and so on.
If you use jade or any of them your html rendering code in express routes will get simplified.
without a templating engine
response.writeHead(200, {"Content-Type:": "application/json"});
var submittedPost = {};
submittedPost['message'] = 'Proof that Node and Mongo are working..';
response.write( "_wrapper('" );
response.write( JSON.stringify(submittedPost) );
response.write( "')");
response.end();
with a templating engine like jade (now pug)
var submittedPost = {};
submittedPost['message'] = 'Proof that Node and Mongo are working..';
response.json(submittedPost);
also with templating engines you can render templates with server side variables and you can access them inside your templates like
app.get('/mypage', function (req, res) {
res.render('mytemplate_page',{template_variable:some_variable});
});
and you can use template_variable inside the template for looping through or displaying.