How can I pass data from Flask to JavaScript in a template

Question

My app makes a call to an API that returns a  dictionary  I want to pass information from this dict to JavaScript in the view  I am using the Google Maps API in the JS  specifically  so I d like to pass it a list of tuples with the long lat information  I know that render template will pass these variables to the view so they can be used in HTML  but how could I pass them to JavaScript in the template    from flask import Flask from flask import render template  app   Flask   name     import foo api  api   foo api API  API KEY     app route      def get data        events   api call get event  arg0  arg1      geocode   event  latitude    event  longitude       return render template  get data html   geocode geocode

User · Answer

Using a data attribute on an HTML element avoids having to use inline scripting, which in turn means you can use stricter CSP rules for increased security.

Specify a data attribute like so:

<div id="mydiv" data-geocode='{{ geocode|tojson }}'>...</div>

Then access it in a static JavaScript file like so:

// Raw JavaScript
var geocode = JSON.parse(document.getElementById("mydiv").dataset.geocode);

// jQuery
var geocode = JSON.parse($("#mydiv").data("geocode"));

User · Answer

You can use    variable    anywhere in your template  not just in the HTML part  So this should work    lt html gt   lt head gt     lt script gt      var someJavaScriptVar       geocode 1          lt  script gt   lt  head gt   lt body gt     lt p gt Hello World lt  p gt     lt button onclick  alert  Geocode     geocode 0         someJavaScriptVar     gt   lt  body gt   lt  html gt    Think of it as a two-stage process  First  Jinja  the template engine Flask uses  generates your text output  This gets sent to the user who executes the JavaScript he sees  If you want your Flask variable to be available in JavaScript as an array  you have to generate an array definition in your output    lt html gt     lt head gt       lt script gt        var myGeocode        geocode 0           geocode 1             lt  script gt     lt  head gt     lt body gt       lt p gt Hello World lt  p gt       lt button onclick  alert  Geocode      myGeocode 0          myGeocode 1      gt     lt  body gt   lt  html gt    Jinja also offers more advanced constructs from Python  so you can shorten it to    lt html gt   lt head gt     lt script gt      var myGeocode            join geocode          lt  script gt   lt  head gt   lt body gt     lt p gt Hello World lt  p gt     lt button onclick  alert  Geocode      myGeocode 0          myGeocode 1      gt   lt  body gt   lt  html gt    You can also use for loops  if statements and many more  see the Jinja2 documentation for more    Also  have a look at Ford s answer who points out the tojson filter which is an addition to Jinja2 s standard set of filters    Edit Nov 2018  tojson is now included in Jinja2 s standard set of filters

User · Answer

Working answers are already given but I want to add a check that acts as a fail-safe in case the flask variable is not available   When you use   var myVariable      flaskvar   tojson       if there is an error that causes the variable to be non existent  resulting errors may produce unexpected results  To avoid this      if flaskvar is defined and flaskvar    var myVariable      flaskvar   tojson        endif

User · Answer

Some js files come from the web or library  they are not written by yourself  The code they get variable like this   var queryString   document location search substring 1   var params   PDFViewerApplication parseQueryString queryString   var file    file  in params   params file   DEFAULT URL    This method makes js files unchanged keep independence   and pass variable correctly

User · Answer

The ideal way to go about getting pretty much any Python object into a JavaScript object is to use JSON  JSON is great as a format for transfer between systems  but sometimes we forget that it stands for JavaScript Object Notation  This means that injecting JSON into the template is the same as injecting JavaScript code that describes the object   Flask provides a Jinja filter for this  tojson dumps the structure to a JSON string and marks it safe so that Jinja does not autoescape it    lt html gt     lt head gt       lt script gt        var myGeocode      geocode tojson          lt  script gt     lt  head gt     lt body gt       lt p gt Hello World lt  p gt       lt button onclick  alert  Geocode      myGeocode 0          myGeocode 1      gt     lt  body gt   lt  html gt    This works for any Python structure that is JSON serializable   python data          some list    4  5  6        nested dict     foo   7   bar    a string       var data      python data tojson     alert  Data      data some list 1          data nested dict foo                data nested dict bar

User · Answer

Well  I have a tricky method for this job  The idea is as follow-  Make some invisible HTML tags like  lt label gt    lt p gt    lt input gt  etc  in HTML body and make a pattern in tag id  for example  use list index in tag id and list value at tag class name   Here I have two lists maintenance next   and maintenance block time   of the same length  I want to pass these two list s data to javascript using the flask  So I take some invisible label tag and set its tag name is a pattern of list index and set its class name as value at index           x000D   x000D     for i in range maintenance next length      x000D   lt label id  maintenance next   i    name    maintenance next i     style  display  none   gt  lt  label gt  x000D   lt label id  maintenance block time   i    name    maintenance block time i     style  display  none   gt  lt  label gt  x000D     endfor   x000D   x000D   x000D    After this  I retrieve the data in javascript using some simple javascript operation    x000D   x000D   lt script gt  x000D  var total len      total len     x000D   x000D  for  var i   0  i  lt  total len  i      x000D      var tm1   document getElementById  maintenance next     i  getAttribute  name    x000D      var tm2   document getElementById  maintenance block time     i  getAttribute  name    x000D       x000D        Do what you need to do with tm1 and tm2  x000D       x000D      console log tm1   x000D      console log tm2   x000D    x000D   lt  script gt  x000D   x000D   x000D

User · Answer

lt script gt      const geocodeArr   JSON parse     geocode   tojson           console log geocodeArr    lt  script gt    This uses jinja2 to turn the geocode tuple into a json string  and then the javascript JSON parse turns that into a javascript array

User · Answer

Just another alternative solution for those who want to pass variables to a script which is sourced using flask  I only managed to get this working by defining the variables outside and then calling the script as follows        lt script gt      var myfileuri     static my csv csv      var mytableid    mytable        lt  script gt       lt script type  text javascript  src   static test123 js  gt  lt  script gt    If I input jinja variables in test123 js it doesn t work and you will get an error

User · Answer

Alternatively you could add an endpoint to return your variable    app route   api geocode   def geo code        return jsonify geocode    Then do  an XHR to retrieve it   fetch   api geocode      then  res   gt   console log res

[javascript] How can I pass data from Flask to JavaScript in a template?

Examples related to javascript

Examples related to python

Examples related to flask

Examples related to jinja2