Databases
StackOverflow2013
Postsdbo
POHow to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USgromiczek
    1. USgromiczek
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
      1. USGab
      1. VTFavorite
    1. COduplicate http://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-python-flask-framework-to-javascript?rq=1
      singulars
      1. POHow to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
      1. USmyusuf3
    2. COCan you add an example of the generated HTML/Javascript?
      singulars
      1. POHow to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
      1. USKyle Kelley
    3. CO@Kyle - above I gave an example of the text outputted in the <ul>, though I would like it to be converted to a JS array rather than printed on screen. Does that make sense?
      singulars
      1. POHow to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?
      1. USgromiczek
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload