Is it possible to pass an ejs variable to embedded JavaScript File

Question

I have four files, and I'm using node for this project. I have index.ejs,app.js,countymap.js,countries.geo.json.

app.js renders the index.ejs file with an array of country codes (i.e. ["MEX","USA"]. Then index.ejs calls countrymap.js which uses d3 to render a map using the json in countries.geo.json.

What I'd like to be able to do is take the country codes being passed through to index.ejs and use them to color the countries with the corresponding country codes according to the countries.geo.json file. I've tried several methods so far and none have seemed to work.

If anybody has any ideas, I could really use the help. This is my final portfolio peace, and I'm stuck on the first hurdle. Also if you think I'm going about it all wrong and have another solution, I'd love to hear that too.

Thanks, George

index.ejs

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Passport Social</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"></script>

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="list-group">
                    <li class="list-group-item active">Info 1</li>
                    <li class="list-group-item">Info 2</li>
                    <li class="list-group-item">Info 3</li>
                </div>
            </div>
            <div class="col-md-9">
                <div class="thumbnail">
                    <svg style="background:grey;"></svg>
                </div>
            </div>
        </div>
    </div>

    <script src="js/countrymap.js" type="text/javascript"></script>



</body>


</html>

app.js

var express     = require("express"),
    app         = express(),
    bodyParser  = require("body-parser");


var countrydata = ["MEX","USA"];

app.get("/", function(req, res){
    res.render("index",{countries:countrydata});
});

app.use(bodyParser.urlencoded({extended:true}));
app.set("view engine","ejs");
app.use(express.static(__dirname+"/public"));


app.listen(process.env.PORT,process.env.IP,function(){
    console.log("Passport Social Server is Running.")
})

countrymap.js

/*global d3*/

var w = 500,
    h = 300;

var projection = d3.geo.mercator()
        .scale(1)
        .translate([0, 0]);
var path = d3.geo.path()
        .projection(projection);

var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h);

d3.json("json/countries.geo.json", function(error, world) {
  if (error) return console.log(error);
  world.features.forEach(function(path){
  })

  var b = path.bounds(world),
      s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h),
      t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0][1])) / 2];
  projection.scale(s)
      .translate(t);

  svg.selectAll("path")
      .data(world.features).enter()
      .append("path")
      //.style("fill", "black")
      .style("stroke", "grey")
      .style("stroke-width", "1px")
      .attr("d", path)
      .attr("id", function(d, i) {return (d.id);});

});

Have you tried <% variable_name %> ??

Sagar Jajoriya
– Sagar Jajoriya

2017-10-04 18:29:04 +00:00
Commented Oct 4, 2017 at 18:29 — Sagar Jajoriya
– Sagar Jajoriya, Commented Oct 4, 2017 at 18:29
That isn't allowed in a js file.

George Kemp
– George Kemp

2017-10-04 18:34:00 +00:00
Commented Oct 4, 2017 at 18:34 — George Kemp
– George Kemp, Commented Oct 4, 2017 at 18:34

Sagar Jajoriya · Accepted Answer · 2017-10-04 18:39:26Z

2

Declare a variable in your index.ejs file just above this <script src="js/countrymap.js" type="text/javascript"></script> For ex :

<script type="text/javascript">
    var get_countries = <% countries %>
</script>
<script src="js/countrymap.js" type="text/javascript"></script>

Then use the javascript variable get_countries in your countrymap.js file.

answered Oct 4, 2017 at 18:39

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

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

1 Comment

skirtle Over a year ago

Perhaps <%- JSON.stringify(countries) %> instead?

Collectives™ on Stack Overflow

Is it possible to pass an ejs variable to embedded JavaScript File

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related