passing an array from express to jade client side javascript

Question

I have this jade template:

html
  head
    script(type="text/javascript" src="https://www.google.com/jsapi")
    script(type='text/javascript')
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Date', 'Tin_A' ],

       - each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

      ]);
      var options = {
      title: 'bla'
      };
      var chart = new google.visualization.LineChart(document.getElementById('chart_line'));
      chart.draw(data, options);
      }


  body
    h1= title
    #chart_line

and I'm using this call to render the jade template in express/node.js:

app.get('/', function(req, res){
  sensors.findSensorAllData(2, 2, function (error,emps){
        console.log(emps);
        res.render('tmp', {
            title : 'Temperatures in a row',
            myData : emps
        });
    });
});

the output of the console.log(emps) is:

[ { _id: 524b8642028e167fb0e3661d,
    sensor_id: 2,
    value: 49,
    date: Tue Oct 01 2013 20:34:40 GMT-0600 (CST) },
  { _id: 524b863d028e167fb0e3661c,
    sensor_id: 2,
    value: 19,
    date: Tue Oct 01 2013 20:34:35 GMT-0600 (CST) } ]

after the rendering occour, I expect to have the values within the javascrip in the jade template... but It won't work. I get only the same lines in plain text, as if the line - each datapoing in myData would have no meaning... what am I doing wrong? Thanks

--- Edit: Everything works fine if I replace the lines

- each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

with

  ['2004',  20],
  ['2005',  30],
  ['2006',  40]

score 1 · Answer 1 · answered Oct 02 '13 at 03:42

I think you may be accidentally injecting a String instead of an Array because of the quotes around the brackets:

- each datapoint in myData
        "[" + datapoint.date + "," + datapoint.value + "],"

I'm not very familiar with Jade, but I think you may want to do the following instead:

- each datapoint in myData
        [#{datapoint.date}, #{datapoint.value}],

Also, in the sample data you gave that works, you are only using the year portion of the Date, but the contents of the datapoint.date property may be a full Date object, I'm not sure if that is what you want for this use.

score 1 · Answer 2 · edited May 23 '17 at 12:02

See this question's chosen answer for why what you're trying to do doesn't work. (JADE + EXPRESS: Iterating over object in inline JS code (client-side)?)

Basically, as soon as you hit the script tag, you're telling the Jade parser to handle things in raw form, and no further processing is done. What you really want to do is redo the script tag for your code like follows:

- if (typeof(pins) != "object")
!= "<script type='text/javascript'>"
!=   "google.load('visualization', '1', {packages:['corechart']});
!=   "google.setOnLoadCallback(drawChart);
!=   "function drawChart() {
!=   "var data = google.visualization.arrayToDataTable([
!=   "['Date', 'Tin_A' ],"
- forEach datapoint in myData
  !=   "[" + datapoint.date + "," + datapoint.value + "],"

!=   "]);"
!=   "var options = {"
!=   "title: 'bla'"
!=   "};"
!=   "var chart = new google.visualization.LineChart(document.getElementById('chart_line'));"
!=   "chart.draw(data, options);"
!=   "}"

Try this, but I'm fairly certain it should work.

PS: The link above also (I believe) clearly states why the previous answer should be incorrect, as you can't have that kind of template placeholder interpolation inside of Jade script tags.

Thank you for your answer. It is very good to learn that that jade takes raw form inside script tags. I'll use this information to find a solution. Another thing, what does `!=` in your example means? — otmezger, Oct 02 '13 at 14:28
@otmezger Look at the [Jade language reference](http://jade-lang.com/reference/), under the sections "Buffered Code"/"Unbuffered Code" - you'll see explanations/code snippets displaying what those operators do. — Paul Bruno, Oct 02 '13 at 15:41

score 1 · Answer 3 · answered Oct 02 '13 at 07:32

1

Ugly alert:

script
  ...
  var data = google.visualization.arrayToDataTable(['Date', 'Tin_A' ].concat(!{JSON.stringify(myData.map(function(i) { return [ i.date, i.value ] })) }));

answered Oct 02 '13 at 07:32

robertklep

198,204
35
394
381

passing an array from express to jade client side javascript

3 Answers3