ホーム / 公開 /

今日のPython第22回「JSONファイルのデータをHTMLに表示」

2024年12月8日日曜日

Python Python_WEBアプリ編 Python_家計簿アプリ編 公開

t f B! P L
記事作成：2024/12/08
管理番号：W005

はじめに


前回は、テンプレートエンジンでテンプレートとなるHTMLファイルに辞書データを送り、組み合わせて表示してみました。
また、同時にテンプレートのHTMLのレイアウト部分を切り出してレイアウトテンプレートを作成し、共通化することで、今後ページが増えていった場合に負担を軽減できるようにしました。
今、このような表示になります。





実施内容


概要


今回は、さらに一歩進んで、

JSONファイルのデータをテンプレートのHTMLファイルに送って表示してみます。

送り先のテンプレートとして、新たなページを追加します。

新たなページは、「家計簿」にします。
以前、作ったCUI版をリメイクします。(→過去記事)

そのために、フォルダとファイルを次のように追加修正します。

既存ファイルの修正
　　main.py

新規フォルダの追加
　　kakeibo_test_json

新規ファイルの追加
　　kd.html
　　KDjson.json

では、始めます。

「家計簿」ページを新たに追加


新たに「家計簿」のページを設けます。
テンプレートとして、kd.htmlファイルを新たに作成し、次のような内容にします。

■コード■■解説等■
前回紹介しましたように、共通部分はlayout.htmlから読み込むため、冒頭に

　　{% extends "layout.html" %}
　　{% block content %}

と記述し、最後は

　　{% endblock %}

で締めくくります。

そしてmain.pyから受け取ったリスト内の辞書データをFOR文でループして読み込みます。

　　{% for pay in pay_list %}
　　　〜
　　{% endfor %}

の部分です。

「家計簿」ページにデータを送る処理


次に、「家計簿」のページにデータを送るために「main.py」に次の内容を追記します。

■コード■■解説等■

JSONファイルを開いて、辞書のリストに読み込み、そのリストを先程作った、テンプレートのkd.htmlファイルに送る処理をしています。

なお、解説文を作りながら気づいたのですが、rowsは必要ありませんでした。
json_load_listをそのままreturn render_templateで送ってもOKです。


必要なライブラリのimport


さらに、今回の修正に必要なライブラリのimportとファイルへのパスを設定します。
プログラムの冒頭部分に次のコードを追加。

■コード■ 
import os
import json
file_path = 'KDjson.json'
■解説等■

JSONファイルを追加


最後にJSONファイルを追加します。
今回追加するファイルの内容は次のようになっています。

■コード■ 
[
    {
        "month": 0,
        "day": 0,
        "content": "内訳",
        "amount": 0
    },
    {
        "month": 1,
        "day": 1,
        "content": "りんご",
        "amount": 100
    },
    {
        "month": 2,
        "day": 1,
        "content": "バナナ",
        "amount": 120
    }
]
■解説等■

以前作成したCUI版の家計簿アプリが、生成したものです。リストの中に、辞書データが3つ登録されています。

これで準備が整いました。

実施結果


表示画面

ブラウザに

http://127.0.0.1:5000/kakeibo

と入力して表示すると、下のように表示されます。




フォルダとファイルの構成

追加修正後のフォルダとファイルの構成は、次のようになります。

■フォルダとファイルの構成■ 
  

C:\Py\Project\MyPj\

  　　　　　　　　|--FlaskPj\
  　　　　　　　　|　　　|--templates\
  　　　　　　　　|　　　|    |--kakeibo_test_json\　★追加
  　　　　　　　　|　　　|    |    └--kd.html　2024/12/8★追加
  　　　　　　　　|　　　|    |--layout.html　2024/12/7
  　　　　　　　　|　　　|    └--index.html　2024/12/7
  　　　　　　　　|　　　|--static\
  　　　　　　　　|　　　|    └--index.css 2024/12/3
  　　　　　　　　|　　　└--main.py　2024/12/8★修正
  　　　　　　　　└--KDjson.json 2024/12/8★追加
■■

ソースコード

上記の説明には、プログラムの関係箇所のみ掲載しています。
各ファイルの全ソースコードはこちらをご覧下さい（→参照）

おわりに

以上、今回はJSONファイルのデータをテンプレートHTMLファイルに送って表示してみました。



このブログを検索

アーカイブ

カテゴリー

QooQ