Develop Reference

Building a project around Bing translate and Node.js

I am trying to build a web app that allows a user to press a button and translate a piece of text using the Bing translator api. I try to run a translator.js file through a script tag but I of course cannot run this node.js code through the client html page. What would be the proper way to design this app. Is my only choice to use something such as requirejs? I also have an app.js file built using express from which I run the app. Sorry for posting a lot of code, I want to give people an idea of the structure of my app. My experience is limited so I am feeling somewhat lost as to how to approach the design of this portion of the app. I don't expect anyone to write the code for me, but to just point in a direction of techniques that I could research so that I could build this properly.
Here is my Node.js translation request called translator.js
const request = require('request');
const uuidv4 = require('uuid/v4');
var key_var = 'TRANSLATOR_TEXT_SUBSCRIPTION_KEY';
if (!process.env[key_var]) {
throw new Error('Please set/export the following environment variable: ' + key_var);
}
var subscriptionKey = process.env[key_var];
var endpoint_var = 'TRANSLATOR_TEXT_ENDPOINT';
if (!process.env[endpoint_var]) {
throw new Error('Please set/export the following environment variable: ' + endpoint_var);
}
var endpoint = process.env[endpoint_var];
let options = {
method: 'POST',
baseUrl: endpoint,
url: 'translate',
qs: {
'api-version': '3.0',
'to': ['en']
},
headers: {
'Ocp-Apim-Subscription-Key': subscriptionKey,
'Content-type': 'application/json',
'X-ClientTraceId': uuidv4().toString()
},
body: [{
'text': 'hallo welt'
}],
json: true,
};
function displayBingTranslate() {
request(options, function(err, res, body){
document.querySelector("#bingTranslateOutput") = JSON.stringify(body, null, 4);
});
};
var accessBingTranslate = document.getElementById("accessBingTranslateButton");
accessBingTranslate.addEventListener("click", function() {
displayBingTranslate();
});
And here is my html
<!-- Section to view online translation -->
<div class="container">
<div class="row">
<div class="col-lg-12 p-0">
<button
class="btn btn-outline-dark btn-sm mb-1"
id = "accessBingTranslateButton">Translate Flashcard</button>
<div class="row m-0 p-0">
<div id="bingTranslateOutput" class="col-lg-12 m-0">
</div>
<script>
// Overall list of flashcards.
var flashcardList = {
flashcards: [],
// Adds a flashcard object to Flashcard array.
addFlashcard: function(fcTextQuestion, fcTextTranslated) {
this.flashcards.push({
fcTextQuestion: fcTextQuestion,
fcTextTranslated: fcTextTranslated
});
},
};
// Add flashcards on load.
var flashcardsDB = <%- JSON.stringify(flashcardsDB) %>;
console.log("the DB:", flashcardsDB);
flashcardsDB.forEach(function(fcardDbToAdd){
flashcardList.addFlashcard(fcardDbToAdd.question, fcardDbToAdd.translation);
});
document.querySelector("#displayFlashcardTotal").textContent = flashcardList.flashcards.length;
console.log("the rest:",flashcardList.flashcards);
var currentFlashcard = 0;
</script>
<script src="/scripts/translator.js"></script>
</body>
</html>
and here is my app.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var mongoose = require("mongoose");
var methodOverride = require("method-override");
// Fix mongoose deprecations
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
// Connect to database.
var url = "///////";
mongoose.connect(url, {
useNewUrlParser: true,
useCreateIndex: true,
}).then(() => {
console.log("connected to mongoDB");
}).catch(err => {
console.log("Error:", err.message);
});
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
// Set 'views' directory for any views
// being rendered res.render()
app.set("view engine", "ejs");
// Override HTTP verbs if necessary.
app.use(methodOverride("_method"));
var flashcardSchema = new mongoose.Schema ({
question: String,
translation: String
});
//creates model with above schema and has methods such as .find etc.
var Flashcard = mongoose.model("Flashcard", flashcardSchema);
app.get('/', (req, res) => {
Flashcard.find({}, function(err, allFlashcards){
if(err){
console.log(err);
} else {
res.render("home", {flashcardsDB: allFlashcards});
}
});
});
// Post to an input action
app.post("/flashcards", function(req, res) {
var question = req.body.question;
var translation = req.body.translation;
var newFlashcard = {question: question, translation: translation};
console.log(newFlashcard);
Flashcard.create(newFlashcard, function(err, newlyCreated){
if(err){
console.log(err);
} else {
res.redirect("/flashcards");
}
});
});
// Show info.
app.get("/info",function (req, res) {
res.render("info");
});
// Show all flashcards
app.get("/flashcards", function(req, res){
Flashcard.find({}, function(err, allFlashcards){
if(err){
console.log(err);
} else {
res.render("flashcards", {flashcards: allFlashcards});
}
});
});
// Show form to create new campground
app.get("/new", function(req, res){
res.render("new");
});
// Edit flashcard
app.get("/flashcards/:id/edit", function(req, res){
Flashcard.findById(req.params.id, function(err, selectedFlashcard){
if(err){
req.flash("error", "Flashcard not found!");
} else {
res.render("edit", {flashcard: selectedFlashcard});
}
});
});
// Update flashcard
app.put("/flashcards/:id", function(req, res){
Flashcard.findByIdAndUpdate(req.params.id, req.body.flashcard, function(err, updatedFlashcard){
if(err){
res.redirect("/flashcards");
} else {
res.redirect("/flashcards");
}
});
});
// Destroy Flashcard
app.delete("/flashcards/:id", function(req, res){
Flashcard.findByIdAndRemove(req.params.id, function(err){
if(err){
res.redirect("back");
} else {
//req.flash("success", "flashcard deleted.");
res.redirect("/flashcards");
}
});
});
app.listen(3000, () => console.log("Flashcard app is listening"));

I think the best aproach would be to pass the translator.js to the node.js server. Create a route on express for translations, and through that route you will call the translator.js and return the result. Then, on your html page, instead of running the translator.js directly, send a request to your server passing the necessary data.
On your app.js, you can do a route like this:
const translator = require('path_to_translator');
app.get('/translation', translator);
And then on your translator.js, you can export a function that will receive the parameters you need and return the result:
const bingTranslate = (req, res) => {
// YOUR CODE HERE
}
module.exports = bingTranslate
And then on your html you will make the button send a request to your server instead of calling translator.js, so you can change the value of the #bingTranslateOutput button based on the response you will receive from the server.

How to post an array to Express API

I'm creating APIs with Express.js and SQL Server. I been posting an object which is easy and very simple, but now i have a new question: how to post an array?
Let's say i have a table which stores only two params:
Table_A
Id | CouponId
In fact, the only record that stores is CouponId, 'cause the Id is created by SQL Server on every record. So, the case is that i get a list of coupons from an api, and the idea is select from one to 'n' with a checkbox and save the selection.
This my code so far:
function getList(){
$http.get('/api/coupons')
.then(function(data){
$scope.infoCoupons = data.data.Response;
}
On the HTML view:
<div class="col-lg-12" align="center">
<input type="checkbox" ng-click="selectAll()"/> <a style="font-size:17px;color:black;text-decoration:none;">Select all coupons</a>
<ul class="coupon-list">
<li ng-repeat="coupon in infoCoupons">
<input type="checkbox" ng-model="coupon.Select" ng-click="checked"/> <a style="font-size:17px;color:black;text-decoration:none;">{{coupon.CodeCoupon}}</a>
</li>
</ul>
</div>
Then, to get the selected coupons:
$scope.selectAll = function(){
$scope.all = !$scope.all;
$scope.infoCoupons.forEach(function(o){
o.Select = $scope.all;
});
}
function chosenCoupons(){
var result = new Array();
var checked = 0;
$scope.infoCoupons.forEach(function(e){
if(e.Select === true){
result.push(e.Id);
checked +=1;
}
});
if($scope.all || checked > 0){
alert("Selected coupons!");
}
else if(checked === 0){
alert("Select at least one coupon");
}
}
Then, my code for the API:
const express = require('express');
const bodyParser = require('body-parser');
const sql = require('mssql');
const app = express();
app.use(bodyParser.json());
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
next();
});
const dbConfig = {
user: "daUser",
password: "daPass",
server: "daServa",
database: "daDB"
};
const executeQuery = function (res, query, parameters) {
sql.connect(dbConfig, function (err) {
if (err) {
console.log(`There's an error: ${err}`);
res.send(err);
sql.close();
}
else {
var request = new sql.Request();
if (parameters && parameters.length > 0) {
parameters.forEach(function (p) {
request.input(p.name, p.sqltype, p.value);
});
}
request.query(query, function (err, result) {
if (err) {
console.log(`Theres an error: ${err}`);
res.send(err);
sql.close();
}
else {
res.send(result);
sql.close();
}
});
}
});
}
app.post("/api/testApi", function(req, res){
parameters = [
{ name: 'CouponId', sqltype: sql.VarChar, value: req.body.CouponId }
];
var query = "INSERT INTO [Table_A] VALUES(#CouponId)";
executeQuery(res, query, parameters);
});
const PORT = process.env.PORT || 8080
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`)
});
This is the code that usually works for an object. My question is: how can i send result (where result is the obtained array) on the API. I need to change something on my code on parameters?
Hope you can help me. I'm using Javascript, Node, Express and SQL Server.

How to post an array to Express API
In angular you simply do $http.post(url, data).
If you assign data to an object that has an array, it will reach express.
Then express can parse the body since you have app.use(express.bodyParser()); so the object should be available to you on the body.
URL Query Params
If you are trying to use query parameters, to pass an array, lets say on attribute items so you simply declare it multiple times
items=1&items=2&items=3 should be parsed to req.query.items === [1,2,3]

Cannot get any response from api created with Express.js and SQL Server

i'm trying to learn how to build an api with Node and Express.js. I've found the next step by step: click here
And created a very similar version but with my data:
var express = require("express");
var bodyParser = require("body-parser");
var sql = require("mssql");
var app = express();
app.use(bodyParser.json());
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
next();
});
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});
var dbConfig = {
user: "myUser",
password: "myPass",
server: "myServer",
database: "MyDB"
};
var executeQuery = function(res, query){
sql.connect(dbConfig, function (err) {
if (err) {
console.log("Error al conectarse a la base :- " + err);
res.send(err);
}
else {
// create Request object
var request = new sql.Request();
// query to the database
request.query(query, function (err, res) {
if (err) {
console.log("Error al correr query en la base :- " + err);
res.send(err);
}
else {
res.send(res);
}
});
}
});
}
//GET API
app.get("/api/ApiRequestData", function(req, res){
var query = "select * from [RequestData]";
executeQuery (res, query);
});
After create the server.js doc, executed with npm install and run with node server.js, i opened on postman using the next url: http://localhost:8080/api/ApiRequestData and get an error message: "Could not get any response". On the Node command prompt i get the message:
TypeError: res.send is not a function
at C:\Users\API\server.js:43:44
at C:\Users\API\node_modules\mssql\lib\main.js:1588:20
at Request.userCallback (C:\Users\API\node_modules\mssql\lib\tedious.js:853:61)
at Request.callback (C:\Users\API\node_modules\tedious\lib\request.js:33:27)
at Connection.message (C:\Users\API\node_modules\tedious\lib\connection.js:1179:27)
at Connection.dispatchEvent (C:\Users\API\node_modules\tedious\lib\connection.js:519:45)
at MessageIO. (C:\Users\API\node_modules\tedious\lib\connection.js:439:23)
at emitNone (events.js:106:13)
at MessageIO.emit (events.js:208:7)
at ReadablePacketStream. (C:\Users\API\node_modules\tedious\lib\message-io.js:92:15)
Someone knows why shows this message?
Hope you can help me.

You are shadowing res from line var executeQuery = function(res, query){... with res from line request.query(query, function (err, res) {.... Just rename the last res to something else and you won't get this error:
request.query(query, function (err, result) {
if (err) {
console.log("Error al correr query en la base :- " + err);
res.send(err);
}
else {
res.send(result);
}
});

You can use below query for fetching the records with hard coded query like.
I used same for my application.
sql.connect(config).then(() => {
return sql.query`select * from [dbo].[Customer]`
}).then(result => {
console.log(result)
}).catch(err => {
console.log(err);
})
Fetch the result using store procedure.
sql.connect(config).then(pool => {
return pool.request().input('Customerid', sql.Int, 2).execute("GetCustomerbyId")
}).then(result => {
console.log(result)
}).catch(err => {
console.log(err);
})

Some of my routes don't work in express

I'm trying to create a tic-tac-toe game and want to save the user data into a database, but my problem is that the router I want to do this with can't be reached, I get an 'Internal server error message(500)'.
Here is the index.js:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Lab5' });
});
//check if server is online
router.get('/alive', function(req, res, next) {
res.send('alive');
});
router.post('/alive', function(req, res) {
//here I generate the next step for the game
});
//this route can't be reached
router.get('/db', function(res, req) {
var db = req.db;
var collection = db.get('usercollection');
collection.find({}, {}, function(e, docs) {
res.send(JSON.stringify(docs));
});
});
//and this route can be reached
router.post('/db', function(req, res) {
var db = req.db;
var collection = db.get('usercollection');
var username = req.body.username;
var gameStatus = req.body.gameStatus;
try {
if(Object.keys(req.body).length !== 0 && JSON.stringify(req.body) !== JSON.stringify({})){
console.log("Data insert...");
collection.insert({
"username" : username,
"gameStatus" : gameStatus
}, function (err, docs) {
if(err) {
res.send("Error inserting data into database!");
}
});
}
} catch(err) {
console.log("Error in insert: " + err);
}
});
module.exports = router;
Here is the getDB.js:
function getDB() {
var xhttp = createRequest();
if(xhttp === null) {
alert("Ajax object not supported by your browser!");
}
else {
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText != null) {
var db = JSON.parse(xhttp.responseText);
console.log(db);
}
}
}
xhttp.open('GET', 'db', true);
xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhttp.send();
}
}
My problem is with
router.get('/db', function() {...});
and the
router.post('/db', function() {...});
works just fine, it inserts the sent data into database.
Any help would be appreciated!

Seems that you forgot to import the mongodb bindings for express.
https://www.npmjs.com/package/express-mongo-db

AJAX post creates a new entry in collection, but does not send the actual data

Here is an example of my data as per console.log(payload):
Object {title: "test post", message: "some message", image: "cat.jpg"}
However, this is what shows up in my mongo collection:
{
"_id": "5684609f8d6ff91e159cef6d",
"created_at": "2015-12-30T22:54:23.266Z",
"updated_at": "2015-12-30T22:54:23.266Z",
"__v": 0
}
Here is the code:
console.log(payload); // what this returns is posted above!
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:3000/api/v1/posts', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(payload);
Can someone help me?
Here is the relevant code from server.js:
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/fluxible-posts');
var Post = require('./database/postModel');
// routes
var router = express.Router();
server.use('/api/v1/', router);
router.use(function(req, res, next) {
// do logging
console.log('Something is happening.');
next(); // make sure we go to the next routes and don't stop here
});
// test route
router.get('/', function(req, res) {
res.json({ message: 'hooray! welcome to our api!' });
});
router.route('/posts')
.post(function(req,res) {
var post = new Post();
post.title = req.body.title;
post.message = req.body.message;
post.image = req.body.image;
post.save(function(err) {
if(err) {
res.send(err);
}
res.json({ message : 'New post created' });
});
})
.get(function(req, res) {
Post.find(function(err, posts) {
if (err)
res.send(err);
res.json(posts);
});
});
router.route('/posts/:post_id')
// get the post with that id
.get(function(req, res) {
Post.findById(req.params.post_id, function(err, post) {
if (err)
res.send(err);
res.json(post);
});
})
// update the post with this id
.put(function(req, res) {
Post.findById(req.params.post_id, function(err, post) {
if (err)
res.send(err);
post.name = req.body.name;
post.save(function(err) {
if (err)
res.send(err);
res.json({ message: 'Post updated!' });
});
});
})
// delete the post with this id
.delete(function(req, res) {
Post.remove({
_id: req.params.post_id
}, function(err, post) {
if (err)
res.send(err);
res.json({ message: 'Successfully deleted' });
});
});

In case if you add request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); you should send payload not in object from but as POST data string like
title=test%20post&message=some%20message&image=cat.jpg
You can use serialize function from Query-string encoding of a Javascript Object
Update:
As I see you didn't added POST data parser middleware to your router so your req.body is undefined. For Content-Type: application/x-www-form-urlencoded you should use body-parser module.
You can install it with npm install body-parser and change your server code to
var bodyParser = require('body-parser');
var router = express.Router();
router.use(bodyParser.urlencoded({ extended: true }));
server.use('/api/v1/', router);
First part of my comment still valid.
Update 2:
Alternatively you can use Content-type: application/json. In this case you need to update your client code should look like:
var payload = {test: "data"}
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:3005/api/v1/posts', true);
request.setRequestHeader('Content-Type', 'application/json');
request.send(JSON.stringify(payload));
And server side:
var bodyParser = require('body-parser');
var router = express.Router();
router.use(bodyParser.json());
server.use('/api/v1/', router);

Try following code
var request = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log("success : " + request.responseText);
} else {
//This would print if something goes wrong along with the error message
console.log("other status : " + request.status + " : " + request.responseText);
}
};
request.open('POST', 'http://localhost:3000/api/v1/posts', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//We need to serialize payload before sending it
request.send(JSON.stringify(payload));
You can use Chrome's network tab under developer tools to monitor the network requests sent. There you would be able to see if the body of the request was sent or not or if the headers were sent as they were set and what was the response.
See the images below