返回 Json object 到 HTML

Question

I'm developing a web app where I need to update the configuration of a certain type of graph. To do so, I'm using Python3 with flask and html.

I want to update the configuration dynamically, which means that I don't want to use the function render_template and instead, I want to use return jsonify(message) .

Below I included the function that I want to use to update the data. This function is used as a callback on the rest of my system and those prints are being executed well, which means that on the flask side, everything seems to be okay. However, I don't know what I should put on the html side to receive this data. Here is the code that I'm using in flask to send the data :

@app.route('/online_visualization_update')
def online_visualization_update(msg):
    print("I should change the network.")
    print("The message was ", msg)
    with app.app_context():
        return jsonify(msg.transition, msg.marking)

This is the code I tried to implement on html to receive the data sent by flask:

<script type=text/javascript>

fetch('/online_visualization_update')
         .then(response => response.json())
         .then(data => console.log(data))
         .catch((error) => {console.error('Error:', error);
});

</script>

Currently, this is not working because the the fetch is being performed every time I open the webapp. What am I doing wrong?

Ideally, I would like to have a function on javascript that is executed only when it receives the data from flask but I don't know whether fetch works like that or not.

Thank you

Answer 1

For that you need to use Fetch API in javascript like this

  // write function like this
  function callApi(){
    fetch('/online_visualization_update')
     .then(response => response.json())
      .then(data => console.log(data))
    .catch((error) => {
      console.error('Error:', error);
    });
   }

Refer this for more about fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Add this code in your Html page:

   <Div class="container">
            <button type="button" onclick="callApi()">Call func</button>
            <!--you need to call function like this whenever you need data -->
    </Div>