how to render (or pass) 2d array[][] to html? - javascript

I have a node.js server, and it has an array[][] data by user's file input.
I want to pass it to html page by res.render(), Could you give me advice on how can I do that?
I did search similiar problem but usually they are about rendering array[], not an array[][].
my array[][] data is like this:
dataLogs[0] ={latitude:33.333,longitude:22.222},
dataLogs[1] ={latitude:33.344,longitude:22.255},
dataLogs[2] = {latitude:33.355,longitude:22.277}
(...)
I want to pass these dataLogs[][] to map html page, for making html mark these places.
I tried to use ejs & res.render(), but I think These are not enough.
const ejs = require("ejs");
const express = require('express'),
http = require('http'),
app = express(),
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
var dataLogs = have some 2d array data;
(...)
app.get('/replay', (req,res) =>{
res.render('drawLines.html',{dataLogs:dataLogs});
});
This is drawLines.html page
var dataLogs = <%= dataLogs %>
(...)
var linePath = [
new kakao.maps.LatLng(dataLogs[0].latitude, dataLogs[0].longitude),
new kakao.maps.LatLng(dataLogs[1].latitude, dataLogs[1].longitude),
new kakao.maps.LatLng(dataLogs[2].latitude, dataLogs[2].longitude )
];
//kakao is just kind of API for map interfaces
(...)
dataLogs[x].latitude, longtiude are not possible to read at this code.
Thank you for reading.

Related

expressJS require a file which has route object from two different place does not work

I am working on an expressJS project. I have a route file named send_email.js, and I want to use parts of this file from two different places. These places are index.js and user.js.
So I added the following line for both of index.js and users.js:
const send_email = require("./send_mail");
But user.js is giving me an error because send_email is undefined. And then I just delete the same line from index.js and everything goes fine. I can reach send_mail in user.js, and it is what I expect.
Am I overlooking something about requiring files in expressJS? I can use this technique effectively in other projects. Are there expressJS specific things which cause this error?
I created same situation in another tiny project and its' codes like these:
// ------------------------index.js -----------------------
const express = require("express");
const app = express();
/* if coment this two line every thing goes fine */
const mylog = require("./deneme1").mylog;
mylog();
/* if coment this two line every thing goes fine */
const yourlog = require("./deneme2").yourlog;
const route = require("./deneme1").route;
console.log('route :', route);
yourlog();
app.get("/", (req, res)=>{
res.send("OK!");
})
app.listen(3000, () => { "listening on "+3000});
// --------------deneme1.js -------------------------
const express = require("express");
const route = express.Router();
const yourlog = require("./deneme2").yourlog;
console.log('yourlog mmm:', yourlog);
route.get("/deneme", function(req, res){
mylog();
res.send("OK!");
});
function mylog () {
console.log("mylog in deneme1.js");
};
module.exports.route = route;
module.exports.mylog = mylog;
// ------------------deneme2.js-----------------
const express = require("express");
const route = express.Router();
const mylog = require("./deneme1").mylog;
console.log('mylogxx :', mylog);
function yourlog(){
console.log("yourlog deneme2");
mylog();
console.log("----");
}
module.exports.yourlog = yourlog;
deneme1.js and deneme2.js require each other and express.js require both of deneme1.js and deneme2.js.
Did you export in your send_mail.js file? You should export whatever function you want to reuse . And use import wherever you need it. Instead of require.
For reference :MDN
I have realized that my problem is related "cyclic dependencies" between my route files. It is kind of design mistake. And there is a stackoverflow question/solution about it:
how-to-deal-with-cyclic-dependencies-in-node-js

Include file content in handlebars [duplicate]

I'm using the handlebars.js hbs wrapper in express.js. I have templates working fine, but I'm needing to add in partials to be rendered with my views.
I'd like to do something like this:
hbs.registerPartial('headPartial', 'header');
// where "header" is an .hbs file in my views folder
However, it's throwing a "header partial can not be found".
I can make the registerPartial work if I pass a string of html to the second param, but I'd like to use separate view files for my partials.
I haven't found any documentation on this, but hoping I may just be missing something easy.
Does anyone know how to use view files in the registerPartial method? If so, how do I implement this?
UPDATE
To give more context, let me add more code.
Here is my "server" file - app.js
var express = require('express')
, routes = require('./routes')
, hbs = require('hbs');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// this is the line that generates the error
hbs.registerPartial('headPartial', 'header');
// What I'm expecting is for "headPartial" to be a compiled template partial
// of the template within views/header.hbs, but it is not loading this way.
// If I do something like hbs.registerPartial('headPartial', '<p>test</p>');
// then it does work. I need to know how to pass an .hbs file to the
// registerPartial method.
// Routes
app.get('/', routes.index);
app.listen(3000);
And here is my routes.index file:
exports.index = function(req, res){
res.render('index', { title: 'Express' })
};
In my views folder, I have three templates:
views/
header.hbs (this is my partial)
index.hbs
layout.hbs
In my index.hbs file, I'm calling the 'headPartial' partial with:
{{> headPartial}}
Any help is greatly appreciated.
For convenience, registerPartials provides a quick way to load all partials from a specific directory:
var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
Partials that are loaded from a directory are named based on their filename, where spaces and hyphens are replaced with an underscore character:
template.html -> {{> template}}
template 2.html -> {{> template_2}}
login view.hbs -> {{> login_view}}
template-file.html -> {{> template_file}}
Cheers!
This code loads all the partial templates in a directory and makes them available by filename:
var hbs = require('hbs');
var fs = require('fs');
var partialsDir = __dirname + '/../views/partials';
var filenames = fs.readdirSync(partialsDir);
filenames.forEach(function (filename) {
var matches = /^([^.]+).hbs$/.exec(filename);
if (!matches) {
return;
}
var name = matches[1];
var template = fs.readFileSync(partialsDir + '/' + filename, 'utf8');
hbs.registerPartial(name, template);
});
Looks like creating a variable and pulling in the template code manually works:
var hbs = require('hbs')
, fs = require('fs')
, headerTemplate = fs.readFileSync(__dirname + '/views/_header.hbs', 'utf8');
and later:
hbs.registerPartial('headPartial', headerTemplate);
For me I had template file my-partial.hbs
Then I tried to access them via:
{{> my-partial }}
But the partial was stored in hbs as my_partial regardless of the filename.
This is thanks to hbs version 3.1.0 line 218
.slice(0, -(ext.length)).replace(/[ -]/g, '_').replace('\\', '/');
This is in the readme
For me, I have a function like:
var hbs = require('hbs');
var fs = require('fs');
var statupfunc = {
registerHbsPartials : function(){
//this is run when app start
hbs.registerPartials(__dirname + "/" + resource.src.views + '/partials');
},
registerOneHbsPartials : function(event){
//this is run for gulp watch
if(event.type == 'deleted')
{
return;
}
var filename = event.path;
var matches = /^.*\\(.+?)\.hbs$/.exec(filename);
if (!matches) {
return;
}
var name = matches[1];
var template = fs.readFileSync(filename, 'utf8');
hbs.registerPartial(name, template);
}
};
Run statupfunc.registerHbsPartials at app startup and then register gulp watch with statupfunc.registerOneHbsPartials to register partials on new creation
gulp.task('watch', function() {
gulp.watch(resource.src.views + '/partials/*.*', statupfunc.registerOneHbsPartials);
});
My app structure (using ExpressJS & HBS-NPM) is:
APP FOLDER
-src
app.js
- routers
- views
-- partials
header.hbs
const hbs = require('hbs')
hbs.registerPartials(path.join(__dirname,'views','partials'))
The above does the job of loading all partials in a single shot. Use this as long as you believe it doesn't impact your performance (loading all partials, even if not required).
And then, use this partial in any HBS file as follows:
{{> partial_file_name_without_hbs_extension}}
Example
{{> header}

Run the script in node.js only after user select file in html

I am using node.js to launch a serve so that my html can communicate with R code. But I am facing a problem on node.js. In my html page, I have a browse selection button, user can use it to choose the data file they want to read into html and node.js will pass the file name to R, so R code will read data from the selected data file and then run the analytics model. But as i only have very basic knowledge of Node.js, so currently, r code would run only when I open the followling link "localhost:3000/vis/rio". So my question is how to make node.js run the R code in background automatically when the data file has been selected. Thank you very much for your help in advance.
Here are my codes:
Javascript-(sending the file name to node.js):
var dataset,availableTags;
function handleFileSelect(evt) {
var file = evt.target.files[0];
$.ajax({ //getting the file name and update to node.js
type:'post',
url:"/getFileName",
data:{filename:file.name}
});
Papa.parse(file, { //papa is a library I used to read csv file
header: true,
dynamicTyping: true,
complete: function(results) {
dataset=results.data;
}
});
}
$(document).ready(function(){
$("#csv-file").change(handleFileSelect);
});
Node.js script:
serve.js:
var express=require('express');
var path = require('path');
var vis = require('./routes/vis');
var index = require('./routes/index');
var bodyParser=require('body-parser');
var app=express();
require('./routes/main')(app);
app.get('/vis/rio',vis.rio); **//this is a package used to get connection with Rserve**
app.set('views',__dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded());
app.post("/getFileName",index.getFileName); **//this is the script to get the file name, it is from index.js**
var server=app.listen(3000,function(){
console.log("Express is running on port 3000");
});
index.js // this is the js file for getting file name
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
getFileName=function (req,res){
global.filename=req.body.filename; **//this is the global variable which stores the file name**
res.send('true');
};
module.exports = {router:router,getFileName:getFileName};
vis.js // this is the file used to connect with Rserve and pass the name to R code
var rio = require("rio");
var arg={};
exports.rio = function(req, res){
arg={names:[global.filename]};
console.log(arg);
options = {
entryPoint:"nameoffile",
data: arg,
host : "127.0.0.1",
port : 6311,
callback: function (err, val) {
if (!err) {
console.log("RETURN:"+val);
return res.send({'success':true,'res':val});
} else {
console.log("ERROR:Rserve call failed")
return res.send({'success':false});
}
},
}
rio.enableDebug(true);
rio.sourceAndEval(__dirname + "/Rcode/test.R",options);
};
It looks like you aren't calling out to /vis/rio at any point when you make the call out to your server.
You'll either need to make a second call on the client side to /vis/rio or if you want to use that section, you can import/require the module in index.js and include it in getFileName and just call out to the function there before you return the file. I'm not super familiar with rio, but I don't see any access point in your code to that function.
Edit: If I understand what you're trying to do correctly, you can always make a second request (to /vis/rio) in the success callback of your first ajax call.

How to render an array in an html file? - Node.js, ejs

I'm working on a project, which will use given coordinates from a txt file and graph them.
My problem right now: I'm trying to use ejs to render the coordinates into my html file, but it just isn't working right. Ejs always just renders: undefined.
Here is the code:
var http = require('http'),
fs = require('fs'),
express = require('express'),
app = express();
app.use(express.bodyParser());
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(__dirname + '/public'));
//Readerfunction
function readLines(input, done) {
//.....
function done(arr) {
var obj = {};
var key1 = arr[0][0];
var key2 = arr[0][1];
obj[key1] = [];
obj[key2] = [];
arr.shift();
arr.forEach(function (item) {
obj[key1].push(item[0]);
obj[key2].push(item[1]);
});
console.log('X:', obj[key1]); // all the variables are logged correctly.
console.log('Y:', obj[key2]);
app.get('/', function(req, res) {
res.render('graph.html', {cordinates: obj});
});
app.listen(8080, function() {
console.log('Server running at http://127.0.0.1:8080/');
});
}
In the html file:
<%= cordinates.obj %>
I hope you can help me, solve this problem! :-)
Greetings,
JS
Well, I think here is the problem: you are passing obj to render as coordinates, so you should use coordinates variable in your template directly, no it's obj property, which is non-existent. I'm not sure if it will be rendered as proper array though, maybe you'll need a loop to print it's elements.

Express.js and form validation

I'm tring to create a simple node- with express.js script that will sum 3 numbers.
On index I have this:
index.jade
!!! 5
html
head
title Test
body
form(name='form1', method='post', action='/')
label(for='1')
input#1(type='text', name='1')
label(for='2')
input#2(type='text', name='2')
label(for='3')
input#3(type='text', name='3')
input(name='submit', type='button', value='submit')
#result
and also i'm now writing the serverside - app.js with req and res object but how to return a result... also result = 1id + 2id + 3id
app.js
var express = require('express');
app = express.createServer();
app.use(express.bodyParser());
app.post('/', function(req, res){
var i = req.param('1', null);
var j = req.param('2', null);
var k = req.param('3', null);
var r = i+j+k;
res.send(r);
});
How I to send results (r) into div id Result on index.jade... so how to return result to index.jade
also here is pastebin code: http://pastebin.com/J9MRFCaE ... i'm new to node and express and sorry for stupid question...
It's simple, just call your "index.jade" rendering passing your data (instead of 'res.send(r);') :
res.render('index', {
result: r
});
And display "result" variable in your jade file :
#result #{result}
Additional information on jade code and express rendering

Categories