python - passing a list of dict in javascript Flask

Question

I know how to pass a variable from Flask (python) to my template html file with {{data}}. However I am having trouble accessing each dictionary element and its respective key-value pairs in the list in javascript.

start.py

def func1():
        data = filter() #returns a list of dictionaries

    return render_template("template1.html", data=data)

template1.html

<html>
  <head>
  .....
  </head>
  <body>
    <p>This is html: {{data}}</p>

    <script type="text/javascript" src="{{url_for('static', filename='js/add.js') }}"></script>
    <script type="text/javascript">
    myvar = '{{data}}';
    document.write(myvar);

    </script>
  </body>

</html>

add.js

//code to be written here

myvar and This is html: both outputs out the entire list of dictionaries. I've already tried myvar[0] but that just outputs [ for some reason. I have also done:

myvar = '{{data|tojson}}';
var parsed = JSON.parse(myvar);
document.write(parsed[0]);

but that outputs [object Object].

Soviut · Accepted Answer · 2017-07-16 19:51:06Z

15

By placing data in single quotes you are creating a string. To get python data types into JavaScript, serialize them with {{ data | tojson }}.

var parsed = JSON.parse('{{data | tojson}}');

You may need to escape the output with safe filter. See more at sending data as JSON object from Python to Javascript with Jinja

edited Jul 16, 2017 at 19:51

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

answered Jul 16, 2017 at 19:45

krassowski

15.7k4 gold badges75 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RaphaMex Over a year ago

single quotes was the important part!

LeggoMaEggo · Accepted Answer · 2017-07-16 19:44:19Z

1

Got it!

myvar = '{{data|tojson}}';
var parsed = JSON.parse(myvar);
document.write(parsed[0]);

Outputs the [object Object] which is the dictionary at the position. So then all you need to do is document.write(parsed[0].name); to access its name value!

answered Jul 16, 2017 at 19:44

LeggoMaEggo

5512 gold badges10 silver badges25 bronze badges

3 Comments

Soviut Over a year ago

Don't use document.write(); You'll often get warnings from the browser about it. Use document.querySelector() or document.getElementById() and set it's .innerText to your parsed[0] value.

LeggoMaEggo Over a year ago

Ah, I see. I figured document.write() would be best since I will be using the dict values to create new html elements.

Soviut Over a year ago

Usually you'd store just data in the json, then loop over it to create elements using document.createElement()

Collectives™ on Stack Overflow

python - passing a list of dict in javascript Flask

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related