title: python - passing a list of dict in javascript Flask
body: <p>I know how to pass a variable from Flask (python) to my template html file with <code>{{data}}</code>. However I am having trouble accessing each dictionary element and its respective key-value pairs in the list in javascript. </p>
  
  <p><strong>start.py</strong></p>
  
  <pre><code>def func1():
          data = filter() #returns a list of dictionaries
  
      return render_template("template1.html", data=data)
  </code></pre>
  
  <p><strong>template1.html</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    .....
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;This is html: {{data}}&lt;/p&gt;
  
      &lt;script type="text/javascript" src="{{url_for('static', filename='js/add.js') }}"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      myvar = '{{data}}';
      document.write(myvar);
  
      &lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>add.js</strong></p>
  
  <pre><code>//code to be written here
  </code></pre>
  
  <p><code>myvar</code> and <code>This is html:</code> both outputs out the entire list of dictionaries. I've already tried <code>myvar[0]</code> but that just outputs <code>[</code> for some reason. I have also done: </p>
  
  <pre><code>myvar = '{{data|tojson}}';
  var parsed = JSON.parse(myvar);
  document.write(parsed[0]);
  </code></pre>
  
  <p>but that outputs <code>[object Object]</code>.</p>