How to use data in external javascript file from express

Question

I am creating application using node.js express where i want to pass some data from express and use in external javascript file.

here is my app.js

const express=require('express');

const path=require('path');

const app=express();

const bodyParser=require('body-parser');

//configure app
 app.set('view engine','ejs');
 app.set('views',path.join(__dirname,'views'));

//use middleware
 app.use(express.static(path.join(__dirname, 'bower_components')));
 app.use(express.static(__dirname + '/public'));
 app.use(bodyParser.json()); 
 app.use(bodyParser.urlencoded({ extended: true }));

//define routes


var arrayData = [
    { id: 1, desc: "Nitesh" },
   {id:2,desc:"Raviaknt"}
]




app.get('/',function(req,res){

      res.render('index', arrayData);

});




app.listen(800,function(){

    console.log('hi');

})

here is my index.ejs file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css"/>
</head>
<body>

       <script src="demo.js"></script>

</body>
</html>

here is my last demo.js file

here how do i use arrayData which am passing in express

You can pass your data by inserting it in some hidden element in your template file and then picking and parsing that value on front end using javascript/jquery. — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jan 11, 2017 at 13:23
Place <script type='text/javascript'>var arrData =<%-JSON.stringify(arrayData)%></script> inside your index.ejs and see if it works. — David R
– David R, Commented Jan 11, 2017 at 13:26
Sorry, I forgot to mention that, in your app.js you need to change your app.get('/'...) as app.get('/',function(req,res){res.render('index',{arrayData: arrayData});}); — David R
– David R, Commented Jan 11, 2017 at 13:30
Yes after that it is working only in index.ejs but any idea how to use in external js file which is linked in index.ejs — Deepak
– Deepak, Commented Jan 11, 2017 at 14:09

Quentin · Accepted Answer · 2017-01-11 13:26:48Z

3

You have to put it somewhere that the JavaScript can access it. (The JavaScript being external isn't particularly relevant).

At the moment, you are passing it to the template renderer and then ignoring it.

Generally, you should be passing an object to the template renderer, not an array, so you would want something more like this:

res.render('index', { myArray: arrayData });

How you then access it depends on exactly which template engine you are using.

There are several ways you could inject it into the page.

You could create visible data, possibly by generating a table element with associated rows and data cells.
You could store it in <meta> elements, or in data-* attributes.
You could generate a <script> element and make it a global variable.

Note that with the latter two approaches you will either be better off serialising the data to a JSON string or doing so it a pretty hard requirement for the technique to work.

You could also forget about injecting it into the page and make it available through seperate URL that just outputs it as JSON. You could then have the client side JavaScript use XMLHttpRequest or fetch to request it.

answered Jan 11, 2017 at 13:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Deepak Over a year ago

after your suggestion its working fine when putting like this in index.ejs <script type='text/javascript'> var arrayData =<%-JSON.stringify(myArray)%> alert("somevalue"+arrayData); but it does not work when i put this code in demo.js file any idea about ?

Quentin Over a year ago

@Deepak — demo.js is being rendered by app.use(express.static(__dirname + '/public')); and not by res.render('index', { myArray: arrayData });. It isn't template file and you aren't passing any data to it from the express route.

Deepak Over a year ago

I am new in this can you please help me what code i have to write so that i can access that data in my external javascript file

Quentin Over a year ago

You'd need to write an Express route in the style of app.get('/',function(req,res){ to do it. It's probably not a good idea though. Keeping your data separate from your logic makes things easier to manage.

Deepak Over a year ago

Then according to you what is the best way to get access data in external Js file from express.if there is any blog then share so that i can learn and can do it.

|

Collectives™ on Stack Overflow

How to use data in external javascript file from express

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related