【问题标题】：Import JSON to Dependent Drop Down select with jinja and flask使用 jinja 和烧瓶将 JSON 导入依赖下拉选择
【发布时间】：2019-06-21 23:24:58
【问题描述】：

Image of Template Edited with Revisions 运行 Windows Web 服务器时，这无需烧瓶或 python 即可工作。但是我想学习使用python和flask来做webdev。

我修改了 JSON 文件和 HTML 页面。我正在尝试在页面加载时将 JSON 数据加载到 HTML 下拉列表中。

它应该工作的方式是：在 ciscotp.html 页面的第一个下拉菜单（建筑物）中选择建筑物后。各自的端点被填充到第二个下拉（端点）列表中。

我已经让它在一个简单的 Windows Web 服务器上成功运行。

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')

【问题讨论】：

标签： python html json flask

【解决方案1】：

您可以使用 Jinja2 模板来实现相同的目的，而不是使用 JavaScript 来填充端点。在端点的 select 块中，您可以如下所示：

{% for server in servers %}
    <option value="{{ server.ip }}">{{ server.location }}</option>
{% endfor %}

然后在服务器端，您需要像这样将服务器加载到内存中：

# 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)

这会将 JSON 数据的字典传递给 Jinja2 模板引擎进行渲染。然后它将评估模板中的 for 循环以生成所有选项。有关模板的更多信息，请参阅docs。有关 Jinja2 模板文档，请参阅 here。

【讨论】：

我对上面的代码做了修改。但是，我无法将您发布的内容和需要的内容联系起来。提前感谢您的所有帮助...我还附上了一张图片。
基本上发生的事情是您正在将 JSON 数组加载到 Flask 服务器的内存中。然后，当您渲染index.html 模板时，您将传入服务器数组。当 Jinja2 格式化模板时，它会为传入数组中的每个元素生成每个 <option> 标签。然后将生成的 HTML 发送到浏览器并显示。我希望这会有所帮助。