Flask Filter Search/List in Python-CodePudding

I created a country list on the python search page section, the data is sent to the Html table with jinja syntax “ The Html table also has a JavaScript function it functions correctly no help with that needed”. I would like to put the data from the data list in a separate file and then get it back to python and then send it to the Html table with the existing jinja syntax and not change anything in the render template function. See an example of some country lists in data fields, but the intention is to have more in it, it is very useful to place them in a separate file and recall them to the python search page then send them to Html table via render template function. I know there's a method to do it via JSON, but as far as I know, I haven't been able to get it done. Any idea of how to do this. Thank you.

Python example

# Country page section.
@app.route('/search')
@login_required
def search():

    countryTables = ("Country", "Yearly Water Use", "Daily Water Use", "Population M")

    data = [
        ("Nigeria", "160,470,000,000 mᶟ", "216 liter.p.capital", "216,139,589"),
        ("Ethiopia", "10,550,000,000 mᶟ", "279 liter.p.capital", "122,963,588"),
        ("Egypt", "77,550,100,000 mᶟ", "2,202 liter.p.capital", "120,334,404")
    ]

    return render_template('search.html', countryTables=countryTables, data=data)

HTML example

{% extends "layout.html" %}
{% block title %}
    Search Page
{% endblock %}
{% block content %}

<div class="container">
    <br>
    <h3>Country Search!</h3>
    <div class="input-group input-group-lg">
        <input aria-describedby="inputGroup-sizing-lg" aria-label="Sizing example input" class="form-control" id="countryInput"
         onkeyup="countryFunction()" placeholder="Search for Country.." type="text">
    </div>
        <table id="countryTable" class="table table-hover">
            <thead>
                <tr>
                    {% for countryTable in countryTables %}
                    <th scope="col">{{ countryTable }}</th>
                    {% endfor %}
                </tr>
            </thead>

            <tbody>
                {% for row in data %}
                <tr>
                    {% for cell in row %}
                    <td> {{ cell }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

CodePudding user response：

Save the country details in JSON file like this (lets name it country.json:

{
    "0": ["Nigeria", "160,470,000,000 mᶟ", "216 liter.p.capital", "216,139,589"],
    "1": ["Ethiopia", "10,550,000,000 mᶟ", "279 liter.p.capital", "122,963,588"],
    "2": ["Egypt", "77,550,100,000 mᶟ", "2,202 liter.p.capital", "120,334,404"]
}

In your route:

import json

@app.route('/search')
@login_required
def search():
    countryTables = ("Country", "Yearly Water Use", "Daily Water Use", "Population M")
    
    f = open('country.json',)
    countryData = json.load(f)

    return render_template('search.html', countryData=countryData, countryTables=countryTables)

In your HTML file:

{% extends "layout.html" %}
{% block title %}
    Search Page
{% endblock %}
{% block content %}

<div class="container">
    <br>
    <h3>Country Search!</h3>
    <div class="input-group input-group-lg">
        <input aria-describedby="inputGroup-sizing-lg" aria-label="Sizing example input" class="form-control" id="countryInput"
         onkeyup="countryFunction()" placeholder="Search for Country.." type="text">
    </div>
        <table id="countryTable" class="table table-hover">
            <thead>
                <tr>
                    {% for countryTable in countryTables %}
                    <th scope="col">{{ countryTable }}</th>
                    {% endfor %}
                </tr>
            </thead>

            <tbody>
                {% for row in countryData %}
                <tr>
                    {% for cell in countryData[row] %}
                    <td> {{ cell }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}