Not sure why data won't render from file into browser

Viewed 68

The '/' route is returning 'Hello world'. However, the '/data' route will not return anything. I can't figure out why it won't render anything in the browser.

from flask import Flask, render_template
import requests
import logging
from flask_sqlalchemy import SQLAlchemy
from localStoragePy import localStoragePy

app = Flask(__name__)
app.config.from_object('config')
db = SQLAlchemy(app)

token = 'Czm5aFtxepvvE4jZddlOsKXiwOzJUfl1BiFW18BfUtsUPPTkZnA663WQ13oQMdEq'
BASE_URL = 'https://canvas.sfu.ca/api/v1/courses/62319/quizzes'
headers = {'Authorization': "Bearer Czm5aFtxepvvE4jZddlOsKXiwOzJUfl1BiFW18BfUtsUPPTkZnA663WQ13oQMdEq".format(token)}
auth_response = requests.get(BASE_URL, headers=headers)
#userStringFromLocalStorage = localStoragePy.getItem('auth_response')
#userFromLocalStorage = JSON.parse(userStringFromLocalStorage)

#print(userStringFromLocalStorage)
print(auth_response.json())
#logging.warning('this is a warning')

@app.route('/')
def hello_world():
    return 'Hello world';

@app.route('/data')
def hello_world_cello():
    data = [{
      "id":164284,
      "title":"Quiz 1",
      "html_url":"https://canvas.sfu.ca/courses/62319/quizzes/164284",
      "mobile_url":"https://canvas.sfu.ca/courses/62319/quizzes/164284?force_user=1&persist_headless=1",
      "description":"",
      "quiz_type":"assignment",
      "time_limit":"None",
      "timer_autosubmit_disabled":false,
      "shuffle_answers":false,
      "show_correct_answers":true,
      "scoring_policy":"keep_highest",
      "allowed_attempts":1,
      "one_question_at_a_time":false,
      "question_count":2,
      "points_possible":2.0,
      "cant_go_back":false,
      "access_code":"None",
      "ip_filter":"None",
      "due_at":"None",
      "lock_at":"None",
      "unlock_at":"None",
      "published":true,
      "unpublishable":true,
      "locked_for_user":true,
      "lock_info":{
         "missing_permission":"participate_as_student",
         "asset_string":"quizzes:quiz_164284"
      },
      "lock_explanation":"This quiz is currently locked.",
      "hide_results":"None",
      "show_correct_answers_at":"None",
      "hide_correct_answers_at":"None",
      "all_dates":[
         {
            "id":53086,
            "due_at":"2021-05-06T06:59:59Z",
            "unlock_at":"None",
            "lock_at":"None",
            "title":"Entrepreneursity Test",
            "set_type":"CourseSection",
            "set_id":131870
         }
      ],
      "can_unpublish":true,
      "can_update":true,
      "require_lockdown_browser":false,
      "require_lockdown_browser_for_results":false,
      "require_lockdown_browser_monitor":false,
      "lockdown_browser_monitor_data":"None",
      "speed_grader_url":"https://canvas.sfu.ca/courses/62319/gradebook/speed_grader?assignment_id=630900",
      "permissions":{
         "manage":true,
         "read":true,
         "update":true,
         "create":true,
         "submit":true,
         "preview":true,
         "delete":true,
         "read_statistics":true,
         "grade":true,
         "review_grades":true,
         "view_answer_audits":false
      },
      "quiz_reports_url":"https://canvas.sfu.ca/api/v1/courses/62319/quizzes/164284/reports",
      "quiz_statistics_url":"https://canvas.sfu.ca/api/v1/courses/62319/quizzes/164284/statistics",
      "message_students_url":"https://canvas.sfu.ca/api/v1/courses/62319/quizzes/164284/submission_users/message",
      "section_count":1,
      "quiz_submission_versions_html_url":"https://canvas.sfu.ca/courses/62319/quizzes/164284/submission_versions",
      "assignment_id":630900,
      "one_time_results":false,
      "only_visible_to_overrides":true,
      "assignment_group_id":154901,
      "show_correct_answers_last_attempt":false,
      "version_number":3,
      "has_access_code":false,
      "post_to_sis":false,
      "migration_id":"None"
   }]
    return render_template('pages/venues.html', areas=data); 

venues.html looks like the following

{% extends 'layouts/main.html' %}
{% block title %}Fyyur | Venues{% endblock %}
{% block content %}
{% for area in areas %}
<h3>{{ area.id }}, {{ area.title }}</h3>
    <ul class="items">
    </ul>
{% endfor %}
{% endblock %} 

main.html

<!doctype html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>

<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- /meta -->

<!-- styles -->
<link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/static/css/layout.main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.responsive.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.quickfix.css" />
<!-- /styles -->

<!-- favicons -->
<link rel="shortcut icon" href="/static/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/static/ico/favicon.png">
<!-- /favicons -->

<!-- scripts -->
<script src="https://kit.fontawesome.com/af77674fe5.js"></script>
<script src="/static/js/libs/modernizr-2.8.2.min.js"></script>
<script src="/static/js/libs/moment.min.js"></script>
<script type="text/javascript" src="/static/js/script.js" defer></script>
<!--[if lt IE 9]><script src="/static/js/libs/respond-1.4.2.min.js"></script><![endif]-->
<!-- /scripts -->
</head>
<body>

  <!-- Wrap all page content here -->
  <div id="wrap">

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/"></a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li>
              {% if (request.endpoint == 'venues') or
                (request.endpoint == 'search_venues') or
                (request.endpoint == 'show_venue') %}
              <form class="search" method="post" action="/venues/search">
                <input class="form-control"
                  type="search"
                  name="search_term"
                  placeholder="Find a venue"
                  aria-label="Search">
              </form>
              {% endif %}
              {% if (request.endpoint == 'artists') or
                (request.endpoint == 'search_artists') or
                (request.endpoint == 'show_artist') %}
              <form class="search" method="post" action="/artists/search">
                <input class="form-control"
                  type="search"
                  name="search_term"
                  placeholder="Find an artist"
                  aria-label="Search">
              </form>
              {% endif %}
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li {% if request.endpoint == 'venues' %} class="active" {% endif %}><a href="{{ url_for('venues') }}">Venues</a></li>
            <li {% if request.endpoint == 'artists' %} class="active" {% endif %}><a href="{{ url_for('artists') }}">Artists</a></li>
            <li {% if request.endpoint == 'shows' %} class="active" {% endif %}><a href="{{ url_for('shows') }}">Shows</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <main id="content" role="main" class="container">

      {% with messages = get_flashed_messages() %}
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-block alert-info fade in">
              <a class="close" data-dismiss="alert">&times;</a>
              {{ message }}
            </div>
          {% endfor %}
        {% endif %}
      {% endwith %}

      {% block content %}{% endblock %}

    </main>

  </div>

  <div id="footer">
    <div class="container">
      <p>Fyyur &copy; All Rights Reserved.</p>
      {% block footer %}{% endblock %}
    </div>
  </div>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script type="text/javascript" src="/static/js/libs/jquery-1.11.1.min.js"><\/script>')</script>
  <script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
  <script type="text/javascript" src="/static/js/plugins.js" defer></script>

</body>
</html> 

I am trying to return 'data' variable in the '/data' route. I am using Flask as my environment. I haven't created a database yet to store these.

1 Answers

Ok, i'm now home, i'll thanks for editing with the main.html

So, your error probably come from here

<li {% if request.endpoint == 'venues' %} class="active" {% endif %}><a href="{{ url_for('venues') }}">Venues</a></li>
            <li {% if request.endpoint == 'artists' %} class="active" {% endif %}><a href="{{ url_for('artists') }}">Artists</a></li>
            <li {% if request.endpoint == 'shows' %} class="active" {% endif %}><a href="{{ url_for('shows') }}">Shows</a></li>

You're asking flask to generate a url for venues, artist, and shows. The problem is that you never define these routes, flask can't create a URL for something that doesn't exist.

You have two solution :

  1. You define your href with a relative url : href="/artists" for example, this will lead to http(s)://{host}/artists This is the good old html way, and it's working easily.
  2. You can define temporary void routes for these, for example :
@app.route('/artists')
def artists():
    return ''

This will return a blank page.

With that and the previous comments i leaved, you should be able to make that working.

You should have error on your Flask app, check it out if you can, even if the error code doesn't help you, it can help other people to understand what's wrong.

Tell me if that helped.

Related