how to loop variables from Python controller to JavaScript with flask?

Question

I want to show nested content on website:

eg:

phrase1: apple

tweet including phrase1: I like apple.

phrase2: banana

tweet including phrase2: banana is best.

my dataset which in python controller is[["apple","including phrase1: I like apple."],["banana","banana is best."]]

my html file is:

{% extends "layout.html" %}
{% block body %}
<p>Click the button to loop from 1 to 6, to make HTML headings.</p>
<button onclick="myFunction2()">Try it</button>
<div id="demo"></div>
<script>
function myFunction2() {
    var x ="", i;    
    for (i=1; i<=2; i++) {
        x = x +"<h2 class=\"phrase\">phrase"+i+":"+"{{phrases[i]}}"+"</h2>";
    }
    document.getElementById("demo").innerHTML = x;
}
</script>
{% endblock %}

but it only shows:

Click the button to loop from 1 to 6, to make HTML headings.

phrase1:

phrase2:

didn't show any phrase. but when I use {{phrases[1]}} {{phrases[2]}},it can show normally. can't I use i loop every variable?

You have a pretty serious misunderstanding of how things work here. You can't possibly use a JavaScript variable inside a Jinja template tag. — Daniel Roseman
– Daniel Roseman, Commented Jun 2, 2018 at 13:52

Ajax1234 · Accepted Answer · 2018-06-02 14:22:42Z

You can use ajax with your flask backend. First, create the HTML template to display the button, and create a second, smaller template to loop over the dataset:

home.html:

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
 <body>
   <p>Click the button below to access tweet list from 1-6</p>
   <button class='tweets'>View Tweets</button>
   <div id='results'></div>
 </body> 
<script>
  $(document).ready(function() {
    $('.tweets').click(function() {
     $.ajax({
     url: "/get_tweets",
      type: "get",
      data: {'tweets': 'yes'},
      success: function(response) {
       $("#results").html(response.result);
       },
       error: function(xhr) {
       //pass
      }
     });
   });
 });
</script>
</html>

display_data.html:

{%for tweet in tweets%}
  <div class='tweet' style='border:solid;border-color:black'>
    <p>{{tweet.title}}: {{tweet.phrase}}</p>
    <p>{{tweet.including}}</p>
  </div>
{%endfor%}

Then, in your .py file, create the necessary flask routes:

import flask
import typing
app = flask.Flask(__name__)
class Tweet(typing.NamedTuple):
  phrase:str
  including:str
  title:str

@app.route('/tweets', methods=['GET'])
def tweets():
  return flask.render_template('home.html')

@app.route('/get_tweets')
def view_tweets():
   datasets = [["apple","including phrase1: I like apple."],["banana","banana is best."]]
   new_set = [Tweet(a, b, f'phrase{i}') for i, [a, b] in enumerate(datasets, start=1)]
   return flask.jsonify({"result":flask.render_template('display_data.html', tweets = new_set)})

Collectives™ on Stack Overflow

how to loop variables from Python controller to JavaScript with flask?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related