Импортируйте JSON в зависимый выпадающий список с помощью jinja и фляги - PullRequest
Новая
       2

Импортируйте JSON в зависимый выпадающий список с помощью jinja и фляги

0 голосов
/ 29 января 2019

Изображение шаблона Отредактировано с ревизиями Работает без фляги или питона при запуске веб-сервера Windows.Однако я хочу научиться использовать Python и колбу, чтобы сделать Webdev.

Я изменил файл JSON и страницу HTML.Я пытаюсь загрузить данные JSON в раскрывающийся список HTML при загрузке страницы.

Как это должно работать: Как только здание выбрано в первом выпадающем меню (Building) на странице ciscotp.html.Соответствующие конечные точки вводятся во второй раскрывающийся список (конечная точка).

Я получил это для успешной работы с простым веб-сервером Windows.

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

1 Ответ

0 голосов
/ 29 января 2019

Вместо того, чтобы использовать JavaScript для заполнения конечных точек, вы можете использовать Jinja2 для достижения того же самого.В блоке 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 в шаблоне, чтобы сгенерировать все параметры.Для получения дополнительной информации о шаблонах см. документы .Для документации по шаблонам Jinja2 см. здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...