How to use XML + AJAX + FLASK + HTML to update website dynaically?

Question

I am trying to create a website that collects information from a XML dictionary and sends it to Flask via AJAX to be displayed on a HTML page dynamically so when the XML file is updated the changes are reflected instantly in the website. Ideally the website requests new data every 5 minutes. So far I have my Python Flask server setup and my HTML page ready. All that is left is the AJAX. Never used AJAX or Javascript before so its taking a while to learn. If someone could look at my script and help to create the missing AJAX and advise me how to proceed then that would be excellet!

@AzyCrw4282 @Depado

App.py: Flask

    # Import Flask Framework Here:
from flask import Flask, flash, redirect, render_template, request, session, abort, url_for
app = Flask(__name__)

# ./Home Script:
@app.route("/")
@app.route("/index")
def index():
    return render_template('index.html')

data.XML: Updates contents every 5 minutes

<root><coin><trader variable="GLDAG_MAPLE">Gold.co.uk</trader><metal>Silver</metal><type>Maple</type><price>£31.56</price></coin><coin><trader variable="GLDAG_BRITANNIA">Gold.co.uk</trader><metal>Silver</metal><type>Britannia</type><price>£32.4</price></coin><coin><trader variable="GLDAG_PHILHARMONIC">Gold.co.uk</trader><metal>Silver</metal><type>Philharmonic</type><price>£32.76</price></coin><coin><trader variable="BBPAG_MAPLE">Bullion By Post</trader><metal>Silver</metal><type>Maple</type><price>£27.12</price></coin><coin><trader variable="BBPAG_BRITANNIA">Bullion By Post</trader><metal>Silver</metal><type>Britannia</type><price>£23.88</price></coin><coin><trader variable="BBPAG_PHILHARMONIC">Bullion By Post</trader><metal>Silver</metal><type>Philharmonic</type><price>£26.88</price></coin></root>

index.html: price of every coin must be displayed in the table

    <table>
      <tr>
        <th>Company</th>
        <th>AG Sovereign</th>
        <th>AG Phillaharmonic</th>
        <th>AG Maple</th>
      </tr>
      <tr>
        <td>Gold.co.uk</td>
        <td>{{ GLDAG_BRITANNIA_WEB }}</td>     # price of britannia from xml here
        <td>{{ GLDAG_PHILHARMONIC_WEB }}</td>  # price of philharmonic from xml here
        <td>{{ GLDAG_MAPLE_WEB }}</td>         # price of maple from xml here
      </tr>
    </table>

Answer 1

You need to write another endpoint that parse XML file, format the data into dictionary and serve it. Sorry I can't write the function for parsing the XML.

import jsonify

@app.route('/ajax')
def ajax:
    data = parse_xml()
    return jsonify(data)

As for the html-page, you might want to change the second row of the html table:

<tr>
  <td>Gold.co.uk</td>
  <td id="britania"></td>     # price of britannia from xml here
  <td id="philharmonic"></td>  # price of philharmonic from xml here
  <td id="maple"></td>         # price of maple from xml here
</tr>

Then this is the script for calling flask ajax endpoint

$.ajax({
   url: '/ajax',
   type: 'GET',
   success: function(data){
      $("#britannia").text(data.britannia)
      $("#philharmonic").text(data.philharmonic)
      $("#maple").text(data.maple)
   }
})

These are some resources to help you in AJAX:

1. https://code-maven.com/slides/python-programming/flask-and-ajax-jquery
2. https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xiv-ajax
3. https://flask.palletsprojects.com/en/1.1.x/patterns/jquery/