※この記事の続きです。

表示する画面側を整備する。

前回、データの加工まで終えているので表示する画面側を整備していきたいと思います。

<table class="table table-bordered table-striped table-dark">
        <thead>
            <tr>
                <th>役名</th>
                <th>職名</th>
                <th>氏名</th>
                <th>生年月日</th>
                <th>経歴</th>
                <th>任期</th>
                <th>株式数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>社長</td>
                <td>CEO</td>
                <td>木板一郎</td>
                <td>1960年7月7日</td>
                <td>2001年 入社<br/>
                    2002年 社長就任
                </td>
                <td>1年</td>
                <td>777</td>
            </tr>
            <tr>
                <td>取締役</td>
                <td>CTO</td>
                <td>木板次郎</td>
                <td>1960年10月3日</td>
                <td>2001年 入社<br/>
                    2002年 取締役就任
                </td>
                <td>1年</td>
                <td>888</td>
            </tr>
        </tbody>
      </table>

とりあえずモックを作ってデザインの確認をします。ここでは、bootstrapのtableクラスを使って体裁を整えておきます。

続いて、初期表示の際と役員情報を取得後にデータを表示するための考慮を追加していきます。

def corporate_officer_list(request):
    context = {'corporate_officer_list': list(), 'corporate_officer_list_count': 0}
    return render(request, 'edinet/corporate_officer_list.html', context)

初期表示の際は、コンテキストに「空のリスト」と「リストの件数＝０」を設定するようにします。

# ...(省略)...
            corporate_officer_list = get_corporate_officer_list(soup)          

    context = {'corporate_officer_list': corporate_officer_list, 'corporate_officer_list_count': len(corporate_officer_list)}
                               
    return render(request, 'edinet/corporate_officer_list.html', context)

役員情報取得後は、その「結果のリスト」と「リストの件数」を設定するようにします。

以上に対応する形でHTML側は、ブロックで囲んでリストが０件なら「No Data」、０件以上あるのであればモックを表示するようにしました。

      {% block content %}
      {% if corporate_officer_list_count == 0 %}
        No Data
      {% endif %}
      {% if corporate_officer_list_count > 0 %}
      <table class="table table-bordered table-striped table-dark">
        <thead>
            <tr>
                <th>役名</th>
                <th>職名</th>
                <th>氏名</th>
                <th>生年月日</th>
                <th>経歴</th>
                <th>任期</th>
                <th>株式数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>社長</td>
                <td>CEO</td>
                <td>木板一郎</td>
                <td>1960年7月7日</td>
                <td>2001年 入社<br/>
                    2002年 社長就任
                </td>
                <td>1年</td>
                <td>777</td>
            </tr>
            <tr>
                <td>取締役</td>
                <td>CTO</td>
                <td>木板次郎</td>
                <td>1960年10月3日</td>
                <td>2001年 入社<br/>
                    2002年 取締役就任
                </td>
                <td>1年</td>
                <td>888</td>
            </tr>
        </tbody>
      </table>
      {% endif %}
      {% endblock %}

ここまで来れば、あとは結果を表示できるようにモックを書き換えていきます。

      {% block content %}
      {% if corporate_officer_list_count == 0 %}
        No Data
      {% endif %}
      {% if corporate_officer_list_count > 0 %}
      <table class="table table-bordered table-striped table-dark">
        <thead>
            <tr>
                <th>役名</th>
                <th>職名</th>
                <th>氏名</th>
                <th>生年月日</th>
                <th>経歴</th>
                <th>任期</th>
                <th>株式数</th>
            </tr>
        </thead>
        <tbody>
            {% for corporate_officer in corporate_officer_list %}
            <tr>
                <td>{{corporate_officer.position}}</td>
                <td>{{corporate_officer.job}}</td>
                <td>{{corporate_officer.name}}</td>
                <td>{{corporate_officer.birthday}}</td>
                <td>{{corporate_officer.biography | linebreaks }}</td>
                <td>{{corporate_officer.term}}</td>
                <td>{{corporate_officer.stock}}</td>
            </tr>
            {% endfor %}
        </tbody>
      </table>
      {% endif %}
      {% endblock %}

contextに設定されたリストをforで取り出しています。linebreaks については、こちらを参考にさせていただきました。
そして、表示された画面が以下になります。

テーブルの列の項目幅とか調整すべきことはまだあるのですが、APIで取得してきたデータを加工して画面に表示するところまで出来ました。

レイアウトの調整は、DjangoではなくCSSやHTMLの世界なので別途対応するとして、今度は、Ajaxを使って非同期で部分Viewとして表の部分を出してみたいと思います。