title: How to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
body: <p>I'm a real noobie using the Flask framework (and client-server generally), so bear with me. I have a basic HTML template file with a bit of Flask (uses the {% ... %} notation) passing in a JSON object from a python file. Right now, as a simple sanity check it's outputting the content of <code>motifs</code> (an array of arrays) as separate lines (<code>&lt;li&gt;</code>) in an unordered list (<code>&lt;ul&gt;</code>). </p>
  
  <p>What I want it to do instead is use the <code>motifs</code> array of arrays in a JavaScript script as data for a visualization I'm trying to do. I tried mingling the Flask script into a JavaScript <code>&lt;script&gt;</code> tag that iterates out a JavaScript array, but got an error that the script tag didn't like the Flask notation (<code>Uncaught SyntaxError: Unexpected token }</code>. So how do I get the Flask script to cough up the array for use in a JavaScript script? I realize I may be misunderstanding some things here (perhaps the nature of JSONs?). I'd be grateful for any nudges in the right direction. Thanks!</p>
  
  <p>Below I've included my html template with the Flask script creating the unordered list, I've also included my failed attempt to use the Flask script in a <code>&lt;script&gt;</code> tag. So how do I successfully access the array (JSON) in a JavaScript?</p>
  
  <p>index.html (a template file - simplified here for clarity):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Here are some motifs:&lt;/p&gt;
      &lt;ul&gt;
          {% for motif in motifs %}
          &lt;li&gt;{{motif}}&lt;/li&gt;
          {% endfor %}
      &lt;/ul&gt;
  &lt;script&gt;one of a few js scripts&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The output of the above file looks like this (missing the bullet points which didn't copy):</p>
  
  <p>Here are some motifs:</p>
  
  <p>{'gene1': 1, 'gene2': 1, 'gene3': 7, 'gene4': 7, 'gene5': 1}</p>
  
  <p>{'gene1': 7, 'gene2': 4, 'gene3': 10, 'gene4': 5, 'gene5': 2}</p>
  
  <p>{'gene1': 7, 'gene2': 1, 'gene3': 8, 'gene4': 5, 'gene5': 8}</p>
  
  <p>{'gene1': 2, 'gene2': 4, 'gene3': 6, 'gene4': 1, 'gene5': 9}</p>
  
  <p>{'gene1': 3, 'gene2': 8, 'gene3': 2, 'gene4': 7, 'gene5': 8}</p>
  
  <p>{'gene1': 1, 'gene2': 5, 'gene3': 1, 'gene4': 9, 'gene5': 5}</p>
  
  <p>{'gene1': 3, 'gene2': 5, 'gene3': 6, 'gene4': 10, 'gene5': 9}</p>
  
  <p>{'gene1': 2, 'gene2': 10, 'gene3': 7, 'gene4': 5, 'gene5': 10}</p>
  
  <p>{'gene1': 5, 'gene2': 5, 'gene3': 10, 'gene4': 10, 'gene5': 5}</p>
  
  <p>{'gene1': 10, 'gene2': 4, 'gene3': 4, 'gene4': 6, 'gene5': 4}</p>
  
  <p>Below is my failed attempt to access in a <code>&lt;script&gt;</code> the array (JSON object) passed by Flask:</p>
  
  <pre><code>&lt;script&gt;
  var motifValuesArray = [];
  var index = 0; // an iterator to assign indexes in the javascript array
  {% for motif in motifs %}
      motifValuesArray[index] = {motif};
      console.log(motifValuesArray[index]);
  {% endfor %}        
  &lt;/script&gt;
  </code></pre>