python AJAX FLASK GET refresh

Question

It is my first post here I always find useful information but this time my turn to be dry!

I am trying to display and refresh the data bid & ask on the html , the data are generated in a python module . I am trying to do that with jQuery and Ajax.

Here is the JSON I am sending, to be more precise I intend to send a list with each pair of currencies, here a single entry for USDJPY .

{'Bid': 109.355, 'Ask': 109.368}

Here is the python code:

import oandapy
from flask import Flask,render_template,request,jsonify

app = Flask(__name__)

def getspot():
    oanda = oandapy.API(environment="practice", access_token="XXXXX")

    response = oanda.get_prices(instruments="USD_JPY")

    prices = response.get("prices")

    #posts =  {"Bid": biding_price,"Ask" : asking_price}
    posts = [dict(Bid=prices[0].get("bid"),Ask=prices[0].get("ask"))]

    return posts


@app.route('/_update_USDJPY',methods=["GET"]) 
def getUSDJY():

    return jsonify(getspot())

@app.route('/',methods=["GET"]) 
def index():

    posts = getspot()

    return render_template("basic2.html")

if __name__=="__main__":
    app.run()

Here is my html page:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type=text/javascript>
setInterval(                               
  function()
  {
     $.getJSON(                            
        $SCRIPT_ROOT + '_update_USDJPY',     
        {},                                
        function(data)                    
        {
          $("#post").text(data.post);                              

        });
  },
  500); 

</script>


{% block content %} 
    {% for post in posts %} 
        <strong>Ask:</strong> {{ post.Ask }} 
        <strong>Bid:</strong> {{ post.Bid }}
        <br>
    {% endfor %} 
{% endblock %} 

Thank you in advance.

Answer 1

add a script tag to our page that sets a global variable to the prefix to the root of the application. Something like this:

<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

your javascript code would be something like this:

  $(function() {
      $.getJSON($SCRIPT_ROOT + '/_update_USDJPY', {
      }, function(data) {
        $("#post").text(data.post);
      });
      return false;
    });
  });

in html:

{% block content %} 
  {% for post in posts %}
    <strong>Ask:</strong> <div id='post'>{{ post }}</div> 
    <strong>Bid:</strong> <div id='post'>{{ post }}</div>
    <br>
  {% endfor %} 
{% endblock %} 

it's not tested just idea how it can be