JADE + EXPRESS: Iterating over object in inline JS code (client-side)?

Question

i want to implement a google map based on its api. i want to add a path based on coordinates to it. therefore i get my coordinates from my model and want to iterate over the object to fille the map with this points. in my jade template i include the api js code like this:

script(type='text/javascript')
    function initialize() {
      var myLatLng = new google.maps.LatLng(0, -180);
      var myOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var flightPlanCoordinates = [

       - if (typeof(pins) != null)
           - var.pins.forEach(function(pin) {
                new google.maps.LatLng(pin.latitude, pin.longitude),
           - })
           new google.maps.LatLng(0,0)
      ];
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      flightPath.setMap(map);
    }

div#map_canvas(style='height: 500px; background-color: #990000;')

the problem is: jade renders this snippet

var flightPlanCoordinates = [

       - if (typeof(pins) != null)
           - var.pins.forEach(function(pin) {
                new google.maps.LatLng(pin.latitude, pin.longitude),
           - })
           new google.maps.LatLng(0,0)
      ];

as it is in the jade template source... the - if etc. doesn't get parsed! any ideas?

thanks!

Peter Lyons · Accepted Answer · 2011-06-08T05:21:14.133

The entire script tag (everything indented under it) is going to be passed through raw without further parsing. Jade does HTML templating not HTML templating plus nested javascript templating. To pass your pins variable from jade local template variable data to script source code, you'll have to do some other approach like using raw jade to render a tiny script tag that just calls your initialize function with the pins data as a literal, or stick your pins data into the dom somewhere and then read it from there. Something along these lines below your script tag (pseudocode, haven't tested)

- if (typeof(pins) != null)
  != "<script type='text/javascript'>"
  != "var pins = [];"
  - forEach pin in pins
    != "pins.push(new Pin(" + pin.latitude + ", " + pin.longitude + "));"
  != "initialize(pins);"
  != "</script>"

score 5 · Answer 2 · answered Aug 08 '11 at 17:11

5

I passed the value as a hidden input element, e.g.:

    input(type='hidden', id='variableName', value='#{variableName}')

Accessed via jQuery:

    $("#variableName").val()

Joe

answered Aug 08 '11 at 17:11

Joe

51
1
1

score 3 · Answer 3 · answered Apr 19 '12 at 16:42

3

You can use this:

script
  console.log(#{var_name});

answered Apr 19 '12 at 16:42

But you can't use `var ok = #{someObjectOrNull} ? true : false`. Further `ok` will be undefined. Instead use Peter Lyons method `!= "var ok = " + (user ? "true" : "false") + ";"` – fider Jan 23 '14 at 17:51

score 2 · Answer 4 · answered Jun 10 '14 at 12:13

2

server side

JSON.stringify(users)

client side

var users=JSON.parse(("#{users}").replace(/&quot;/g,'"'));

answered Jun 10 '14 at 12:13

Cherif

5,223
8
33
54

score 2 · Answer 5 · answered Jan 03 '12 at 18:42

2

the script tags are purely text, you can't easily mix the Jade to generate this javascript, it's usually a reflection of poor design. You can just serialize things as JSON that you need on the client or use express-expose to do this

answered Jan 03 '12 at 18:42

tjholowaychuk

3,026
1
21
6

1

+1 Express-expose is probably what you want. One thing I don't get: If I want to use jQuery to do some dynamic JS stuff on my webpage before sending it client-side, that needs the local variables sent from node.js, whats the proper way to do this? – Varun Singh Jan 09 '12 at 04:17
1

with something like express-expose :p there is no "before" sending it to the client, you can't operate on the client without your markup/js there – tjholowaychuk Jan 09 '12 at 20:54

score 0 · Answer 6 · edited Nov 23 '16 at 05:55

0

I had a similar issue and this line of code solved it:

var myvar  = !{JSON.stringify(mydata)};

The answer came originally from this post

edited Nov 23 '16 at 05:55

nicovank

3,157
1
21
42

answered Nov 23 '16 at 05:23

Erjim

29
2

JADE + EXPRESS: Iterating over object in inline JS code (client-side)?

6 Answers6

Linked