How to pass a list from Python by Jinja2 to JavaScript

Question

Let s say I have a Python variable   list of items     1   2   3   4   5     and I pass it to Jinja by rendering HTML  and I also have a function in JavaScript called somefunction variable   I am trying to pass each item of list of items  I tried something like this      for item in list of items     lt span onclick  somefunction   item     gt   item   lt  span gt  lt br gt     endfor      Is it possible to pass a list from Python to JavaScript or should I pass each item from list one by one in a loop  How can I do this

User · Answer

Make some invisible HTML tags like  lt label gt    lt p gt    lt input gt  etc  and name its id  and the class name is a pattern so that you can retrieve it later   Let you have two lists maintenance next   and maintenance block time   of the same length  and you want to pass these two list s data to javascript using the flask  So you take some invisible label tag and set its tag name is a pattern of list s 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    Now you can retrieve the data in javascript using some javascript operation like below -   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

I can suggest you a javascript oriented approach which makes it easy to work with javascript files in your project   Create a javascript section in your jinja template file and place all variables you want to use in your javascript files in a window object   Start html         block scripts     lt script type  text javascript  gt  window appConfig         debug     if env     development    true   else   false   endif         facebook app id     facebook app id         accountkit api version      accountkit api version          csrf token      csrf token        lt  script gt   lt script type  text javascript  src     url for  static   filename  app js       gt  lt  script gt     endblock      Jinja will replace values and our appConfig object will be reachable from our other script files   App js  var AccountKit OnInteractive   function        AccountKit init           appId  appConfig facebook app id          debug  appConfig debug          state  appConfig csrf token          version  appConfig accountkit api version            I have seperated javascript code from html documents with this way which is easier to manage and seo friendly

User · Answer

You can do this with Jinja s tojson filter  which     Dumps a structure to JSON so that it   s safe to use in  lt script gt  tags  and  in any place in HTML with the notable exception of double quoted attributes    For example  in your Python  write   some template render list of items list of items        or  in the context of a Flask endpoint   return render template  your template html   list of items list of items    Then in your template  write this      for item in list of items     lt span onclick  somefunction   item   tojson     gt   item   lt  span gt  lt br gt     endfor       Note that the onclick attribute is single-quoted  This is necessary since  tojson escapes   characters but not   characters in its output  meaning that it can be safely used in single-quoted HTML attributes but not double-quoted ones    Or  to use list of items in an inline script instead of an HTML attribute  write this    lt script gt  const jsArrayOfItems     list of items   tojson           do something with jsArrayOfItems in JavaScript      lt  script gt    DON T use json dumps to JSON-encode variables in your Python code and pass the resulting JSON text to your template  This will produce incorrect output for some string values  and will expose you to XSS if you re trying to encode user-provided values  This is because Python s built-in json dumps doesn t escape characters like  lt  and  gt   which need escaping to safely template values into inline  lt script gt s  as noted at https   html spec whatwg org multipage scripting html restrictions-for-contents-of-script-elements  or single quotes  which need escaping to safely template values into single-quoted HTML attributes    If you re using Flask  note that Flask injects a custom tojson filter instead of using Jinja s version  However  everything written above still applies  The two versions behave almost identically  Flask s just allows for some app-specific configuration that isn t available in Jinja s version

User · Answer

To pass some context data to javascript code  you have to serialize it in a way it will be  understood  by javascript  namely JSON   You also need to mark it as safe using the safe Jinja filter  to prevent your data from being htmlescaped   You can achieve this by doing something like that   The view  import json   app route      def my view        data    1   foo       return render template  index html   data json dumps data     The template   lt script type  text javascript  gt      function test func data            console log data             test func    data safe      lt  script gt    Edit - exact answer  So  to achieve exactly what you want  loop over a list of items  and pass them to a javascript function   you d need to serialize every item in your list separately  Your code would then look like this   The view  import json   app route      def my view        data    1   foo       return render template  index html   data map json dumps  data     The template     for item in data         lt span onclick someFunction    item safe      gt    item    lt  span gt     endfor      Edit 2  In my example  I use Flask  I don t know what framework you re using  but you got the idea  you just have to make it fit the framework you use   Edit 3  Security warning   NEVER EVER DO THIS WITH USER-SUPPLIED DATA  ONLY DO THIS WITH TRUSTED DATA   Otherwise  you would expose your application to XSS vulnerabilities

User · Answer

To add up on the selected answer  I have been testing a new option that is working too using jinja2 and flask    app route      def my view        data    1  2  3  4  5      return render template  index html   data data    The template    lt script gt      console log     data   tojson       lt  script gt    the output of the rendered template    lt script gt      console log   1  2  3  4     lt  script gt    The safe could be added but as well like    data   tojson   safe    to avoid html escape but it is working without too

User · Answer

I had a similar problem using Flask  but I did not have to resort to JSON  I just passed a list letters     a   b   c   with render template  show entries html   letters letters   and set   var letters      letters safe      in my javascript code  Jinja2 replaced    letters    with   a   b   c    which javascript interpreted as an array of strings

[javascript] How to pass a list from Python, by Jinja2 to JavaScript

Examples related to javascript

Examples related to python

Examples related to variables

Examples related to jinja2