Отображение данных JSON с помощью Flask в HTML
Здравствуйте! В сегодняшней статье мы рассмотрим как с помощью Python и Flask вывести JSON данные в формате HTML. В качестве данных будем использовать открытое API https://jsonplaceholder.typicode.com/posts. Это бесплатный онлайн-сервис REST API, который предоставляет имитированный сервер для тестирования и прототипирования. Он предлагает набор фиктивных конечных точек данных JSON, которые имитируют типичные операции CRUD (Создание, чтение, обновление, удаление), с которыми вы можете столкнуться в реальном веб-приложении. Мы же используем его в качестве массива данных.
Итак пристутим.
Установим Flask через командную строку.
pip install flask
Создим файл app.py и рядом папку templates, внутри templates еще один файл — index.html.
app.py
from flask import Flask, render_template, jsonify
import requests
app = Flask(__name__)
@app.route('/')
def index():
# Fetch JSON data from a URL
url = "https://jsonplaceholder.typicode.com/posts"
response = requests.get(url)
data = response.json()
# Render the template with JSON data
return render_template('index.html', data=data)
if __name__ == '__main__':
app.run(debug=True)
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Data</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>JSON Data</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>User ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
{% for post in data %}
<tr>
<td>{{ post.id }}</td>
<td>{{ post.userId }}</td>
<td>{{ post.title }}</td>
<td>{{ post.body }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
Здесь при помощи Python мы динамически изменяем Web-страницу, о чем подробнее можно узнать из видеокурса Программирование на Python с Нуля до Гуру
Запустим проект:
python app.py
После запуска сервера, вводим в адресной строке браузера http://localhost/
Таким образом, при помощи Python мы вывели JSON данные на HTML странице проекта Flask. Подобным образом возможно отобразить в своем проекте любые доступные публичные API.
