Issue
Image of Template Edited with Revisions This works without flask or python when running a windows web server. However I want to learn to use python and flask to do webdev.
I have modified the JSON file and the HTML page. I am trying to load the JSON data into the HTML drop down list on page load.
The way it should work is: Once a building is selected in the first drop down (Building) on the ciscotp.html page. The respective endpoints are populated into the second dropdown (Endpoint) list.
I have gotten this to work successfully with a simple windows web server.
servers.html
{% extends "base.html" %}
{% block content %}
<title>Endpoints</title>
<body>
<div class="container" style="width:600px;">
<h2 align = "center">Select The Building And Endpoint.</h2><br /><br />
<label for = "full_name" class="required" >Building :</label>
<select name="building" id ="buildings" class="form-control input-lg" onchange="populateEndpointList()">
{% for buildings in ciscotp %}
<option value="{{ buildings.ciscotp }}" SELECTED>{{ buildings.building }}Select Building<option>
{% endfor %}
</select>
<br />
<label for = "full_name" class="required" >Endpoint :</label>
<select name="endpoint" id="endpoint" class="form-control input-lg">
{% for building in collabtp %}
<option value="{{ location.ciscotp }}">{{ location.parent_id }}Select Building<option>
{% endfor %}
<!--<option value="">Select Endpoint</option> -->>
</select>
</div>
</body>
{% block scripts %}
{% endblock %}
{% endblock %}
collabEp.json
[
{
"id":"1",
"object_ID":"f1",
"building":"AirFac",
"parent_id": "0"
},
{
"id":"2",
"object_ID":"f1",
"building":"Ferries Sports Bar",
"parent_id": "0"
},
{
"id":"3",
"object_ID":"f1",
"building":"Clenical",
"parent_id":"0"
},
{
"id":"4",
"object_ID":"f1",
"building":"SouthWest Busses",
"parent_id":"0"
},
{
"id":"15",
"location": "Sim Room",
"ip": "10.*.*.*",
"parent_id": "0",
"type": "Cisco"
},
{
"id":"16",
"location": "2083 - Sim Classroom",
"ip": "10.*.*.*",
"parent_id": "0",
"type": "Cisco"
},
{
"id":"17",
"location": "2083 - Conference Room 1",
"ip": "10.*.*.*",
"parent_id": "3",
"type": "HP"
},
{
"id":"18",
"location": "3089 - Conference Room 3",
"ip": "10.*.*.*",
"parent_id": "3",
"type": "HP"
},
{
"id":"19",
"location": "2059 - Conference Room",
"ip": "10.*.*.*",
"parent_id": "2",
"type": "Dell"
}
Routs.py
import json
from datetime import datetime
from flask import Flask, render_template, url_for, jsonify, request
from flask_json import FlaskJSON, JsonError, json_response, as_json
from app import app
@app.route('/index', methods=['GET', 'POST'])
@app.route('/')
def index():
return render_template('index.html', )
@app.route('/ciscotp', methods=['GET', 'POST'])
def ciscotp():
if request.method == 'POST':
return redirect(url_for('index'))
return render_template('ciscotp.html')
# Load the file into memory
with open("app/static/js/collabEp.json", "r") as f:
data = json.load(f)
#print (data)
# Return the JSON in the template
@app.route("/")
def buildingEp():
return render_template("ciscotp.html", servers=data)
if __name__== '__main__':
app.run(host='0.0.0.0')
Solution
Rather than using JavaScript to populate the endpoints, you can use Jinja2 templating to achieve the same. In the select block for your endpoints, you can make look like this:
{% for server in servers %}
<option value="{{ server.ip }}">{{ server.location }}</option>
{% endfor %}
And then on the serverside, you need to load the servers into memory like so:
# Load the file into memory
with open("servers.json", "r") as f:
data = json.load(f)
# Return the JSON in the template
@app.route("/")
def index():
return render_template("index.html", servers=data)
This will pass the dictionary of JSON data into the Jinja2 templating engine to be rendered. It will then evaluate the for loop in the template to generate all of the options. For more info about templating, see the docs. For the Jinja2 templating documentation, see here.
Answered By - akrantz01
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.