CODEWITHSUNDEEP
javascriptpythonflask
knk
knk

Reputation: 856

Accessing python list in javascript as an array

I have this in my flask views.py

    def showpage():
      ...
      test = [1,2,3,4,5,6]
      return render_template("sample.html",test=test)

I have this in my sample .html

    <script> var counts = {{test}}; </script>

This gives me a empty counts variable. How can I get the counts same as the test list in python?

Upvotes: 21

Views: 56834

Answers (5)

Ryan Loggerythm
Ryan Loggerythm

Reputation: 3314

I've never liked having to use json.dumps. In this solution, arrays are not a special case. Just put your arrays and any other variable into an object:

Python

@app.route('/somePath')
def example():
    data = {
        'robotNames': ['Wall-E', 'Bender', 'Rosie']
    }
    return render_template('index.html', data=data)

JavaScript

<script>
    var flaskData = JSON.parse('{{data | tojson | safe}}');

    var robots = flaskData.robotNames;
    robots.forEach(function (robot) {
        console.log(robot);
    });
</script>

Upvotes: 1

Snehal Parmar
Snehal Parmar

Reputation: 5833

You try to return dictionary from your python showpage function like following and it will work:

def showpage():
    """Your logic for getting the list to return """
    test_dict = {"data_list": [1,2,3,4,5]}
    return render_template("sample.html", test=test_dict)

Upvotes: 0

liminal_
liminal_

Reputation: 91

You can also use 

{{ test|safe }}

or 

{{ test|tojson|safe }}

The safe filter is to be used within script tags.

Upvotes: 8

tbicr
tbicr

Reputation: 26070

  1. When you insert variable to template {{ test }} it take object representation. For list of int [1,2,3,4,5,6] it will be rendered as [1, 2, 3, 4, 5, 6], so it is valid javascript array, but this method not safe complex objects without javascript-like representation, for example, test = [1,2,3,4,5,any] will rendered as [1, 2, 3, 4, 5, &lt;built-in function any&gt;], however this is just example and will never work.

  2. To implicitly cast to javascript object in flask exist tojson filter:

    <script> var counts = {{ test|tojson }}; </script>

    So if the object is JSON serializable, then all will be rendered, otherwise the template engine will raise an exception.

  3. You also can send javascript code to your template:

    from flask import json
return render_template("sample.html",test=json.dumps(test))

    but it is not a good approach and it's better use tojson filter that is also HTML markup safe.

  4. I prefer to not mix any javascript code within templates and split templates, javascript and javascript data with ajax. If this approach is hard I would prefer to use tojson filter.

Upvotes: 28

shaktimaan
shaktimaan

Reputation: 12092

You use json.dumps in the flask view and JSON.parse in the javascript code.

In the python view:

def showpage():
    ...
    test = [1,2,3,4,5,6]
    test = json.dumps(test)
    return render_template("sample.html",test=test)

In the JavaScript code:

<script> var counts = JSON.parse("{{ test }}"); </script>

Upvotes: 7

Related Questions