vendredi 21 août 2020

Sending JSON data from Flask to Front-end

Is there anybody here with experience in Flask? I am working on my uni project currently, "COVID-19 tracker". At the moment I am trying to send data from Flask to JS and populate a table with that data. But all I get is no results. Please help me. I have to refresh and delete cache, but it does no changes at all.

Flask code:

from flask import Flask, render_template
import requests

app = Flask(__name__)

@app.route('/')
def index():
    world_data_latest = get_world_data()
    return render_template('index.html', world_data_latest = world_data_latest)


def get_world_data():
    url = "https://covid-193.p.rapidapi.com/statistics"

headers = {
    'x-rapidapi-host': "covid-193.p.rapidapi.com",
    'x-rapidapi-key': "51896eb81amsh2a57d7238e4a57ep137532jsn106ff7f478ab"
    }

response = requests.request("GET", url, headers=headers)
return response.json()

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

JavaScript code:

data = JSON.parse('')

var table = document.getElementById('world_table');
a = 0
data.forEach(function(object) {
   var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + 0 + '</td>' +
        '<td>' + object.response.country + '</td>' +
        '<td>' + object.response.cases.new + '</td>' +
        '<td>' +  object.response.cases.active + '</td>' +
        '<td>' +  object.response.cases.recovered + '</td>'
        '<td>' +  object.response.cases.recovered + '</td>'
        '<td>' +  object.response.cases.deaths.total + '</td>'
        '<td>' +  object.response.cases.total + '</td>';
   table.appendChild(tr);
});

HTML:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>COVID-19 tracker application</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" src="" type="text/css">
    <script rel="stylesheet" src=""></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-custom">
        <span class="mb-0 h2">COVID-19 tracker</span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link active" href="#world">World</span> <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#uk">United Kingdom</a>
            <a class="nav-item nav-link" href="#scotland">Scotland</a>
          </div>
        </div>
      </nav>
      <div class="world">
          <div class="table" id="world_table">
            <table class="world_table" id="world_table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Country</th>
                    <th scope="col">New</th>
                    <th scope="col">Active</th>
                    <th scope="col">Recovered</th>
                    <th scope="col">Deaths</th>
                    <th scope="col">Total</th>
                  </tr>
                </thead>
              </table>
          </div>

      </div>
    </body>
 </html>



Aucun commentaire:

Enregistrer un commentaire