Pythonで取得したJSON型の値をHTMLに送り、そのままのインデントで表示させたい

困っていること

# Python
def test():
  test_info = []

  for test in test.NameList():
    test_name = test.getName(testname)
    test_json = test.TestJson()
    test = (json.dumps(test_json['Status'], indent=2, separators=(',', ': ')))

    print(test)

    test_info.append([test.getName(), test])

  return render_template('test.html', test_info=test_info)

# HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <div>
    {% for test in test_info %}
        {% set name = test[0] %}
        {% set json = test[1] %}
        <p>名前: {{ name }}</p>
        <p>{{ json }}</p>
    {% endfor %}
  </div>
</body>
</html>

上記のようにjsonでとった値をappendし、htmlに送ると結果が全て1行につらつら書かれてしまい、インデントも適用されません。
python内で値を取得し、printした際はコンソールに正しくインデントされた状態で取得できています。

appendするとインデントがなかったことにされてしまうのでしょうか。
また、解決するにはどうしたら良いでしょうか・・・？
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

私も似たようなことで悩みました。
出力されたHTMLのソースに改行とインデントが付いていて「そういうことか・・・」と気づきました。

HTMLで改行を表現するためには<br />
インデントを表現するためには左余白を付けてやる必要があります。
改行コードを<br />に変えたりするのは面倒だと思うので、手っ取り早く出力方法をリストに変えてみてはどうでしょうか。

html
1<body>
2  <ul>
3    {% for test in test_info %}
4        {% set name = test[0] %}
5        {% set json = test[1] %}
6        <li>
7            名前: {{ name }}{{ json }}
8        </li>
9    {% endfor %}
10  </ul>
11</body>

投稿2018/02/05 04:14

SystemAjisai

総合スコア171

gomakichi

2018/02/05 05:28 編集

回答ありがとうございます。わたしの希望としては、JSON形式のまま表示させたい（1行にならずにきちんとインデントがついてほしい）のですが、それは厳しいということでしょうか？リストにしても1行になってしまうのですが・・・例）[ { "Resource": "hogehoge", "Action": "fugafuga"}, { "Resource": [ "hogehoge2", "hugahuga2" ], "Action": "hugahuga3"} ] ではなく [ { 　　"Resource": "hogehoge", 　　"Action": "fugafuga" }, { 　　"Resource": 　　 [ 　　　 "hogehoge2", "hugahuga2" 　　 ], 　　　"Action": "hugahuga3" } ] のような形で表示させたいと考えています

SystemAjisai

2018/02/05 23:36 編集

すみません、JSON形式のままってそういう意味だったんですね。 gomakichiさんの最初のソースで、｛｛json｝｝を囲っている「p」タグを「pre」に変えてみるのはどうでしょうか。

gomakichi

2018/02/06 01:17

再度回答ありがとうございます！ preタグに変更したところ、うまく行きました！元々のデータに改行が入っていたためpreタグを使用したら表示されたということでしょうか・・・？

SystemAjisai

2018/02/06 05:11

そうですね。ブラウザで見た時に改行してもらうためには、改行コードではなく「br」タグを使用する必要がありますが、preタグで囲った範囲はhtmlソースをそのまま表示してくれます。例えば、このページでgomakichiさんが質問文に書かれてるソースの部分なんかも、HTMLソースを覗いてみるとpreタグで囲われてると思います。

gomakichi

2018/02/06 05:33

おっしゃったように、preタグで囲まれていました。何度も親切に回答いただきありがとうございました。

行動規範の内容に同意します