質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

render_templateでhtmlにjsonデータを渡したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,728

score 341

render_templateでhtmlにjsonデータを渡したい

リストオブジェクトを「viewを担当するpythonファイル」と、「htmlファイル」の間で送受信したいです。
そのためにはjsonデータを使う必要があると聞きました。

なので、手始めに私は「viewを担当するpythonファイル」でリストオブジェクトをjsonデータに変えました。
しかしいざrender_templateを書く段になって、「jsonデータをhtmlに渡したあと、どうやってリストとして展開すればいいのだろうか」と詰まってしまいました。

ググっても検索能力の低さからか、役たちそうなサイトは見つからず、いっそ聞いてしまおうと思い質問させていただきました。

話を単純にするため以下に最小限のコードを書きます。jsonを受け取ったhtmlはどうやってそのデータを解凍?し展開すればよいのでしょう?

#jsonのデータを使いhtmlをレンダリングする。
@@app.route(・・・)
def sample():
--略--
dic ={#jsonデータを作る。
                "sen":sentence,#それぞれリストとなっている。
                "clu":cluster
            }
return render_template('clus_feel.html', getjson = dic)#一応getjsonを指定しておいたけど、htmlでどういうふうに使えばいいのかわからない・・・
       <div class="row">
                    <div class="col">
                        <input type="text" class="form-control" value="jsonにしたsentenceを入れたい">
                    </div>
                    <div class="col">
                        <input type="number" class="form-control" value="jsonにしたclusterを入れたい">
                    </div>
         </div>


htmlの表示のイメージとして以下のようになってくれれば、万々歳です
sentence[1] cluster[1]
sentence[2] cluster[2]
sentence[3] cluster[3]
・・・・

大変初歩的なことをお聞きしていると思いますので、直接的な回答でなくても、参考とするべきサイトや、どんな勉強が足りないのかの情報だけでも大歓迎です。

このままでは文豪ドストエフスキーが書いたように、山盛りになった玉を一つづつ向こう側に運び、それをまたこっちに運ぶのを繰り返すような、無限の輪廻の中です・・・

どうかご助言いただきたいです・・・

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

例えば次のように書くとよいのではないかと思います。

- return render_template('clus_feel.html', getjson = dic)#一応getjsonを指定しておいたけど、htmlでどういうふうに使えばいいのかわからない・・・
+ return render_template('clus_feel.html', pairs=zip(sentence, cluster))
{% for s, c in pairs %}
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" value="{{ s }}">
    </div>
    <div class="col">
      <input type="number" class="form-control" value="{{ c }}">
    </div>
  </div>
{% endfor %}

尚、前提として、 sentence と cluster は各要素がすべて str の list だと想定しています。

以下補足です。

Jinja2 で 2 つの list を同時に回すかんたんな方法はデフォルトで用意されていなかった気がしますので(調べずに言っているので間違っている可能性があります)、 sentence と cluster の各要素が関係しているのであれば、テンプレートに渡す際は dict ではなく、各要素が sentence と cluster の各要素のペアになった list (厳密には list ではありませんが説明を単純化するために list と呼びます)として渡した方が、テンプレート側での処理がかんたんになるかと思います。 

そうではなく、あくまでもテンプレートには dict として変数を渡したいということであれば、各要素は getjson['sen'][0] 等でアクセスできるかと思いますので、そのようにされるとよいのではないでしょうか。

参考:

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/18 22:26

    回答ありがとうございます!
    私が書いておくべきだったので申し訳ないのですが、実はzipはすでに試しまして、二つのリストを展開することには成功していました。それをpostメソッドで回収することができなかったので、jsonを使おうということになったのです・・・

    前の投稿にもgh640さんには回答していただきましたね・・・そこでも書いた通り、私の実力ではwebアプリは少しきついと思ったので、guiに切り替えようと思います。
    親切にも二つの投稿を考えてくださり、本当にありがとうございました・・・!

    キャンセル

  • 2019/03/02 18:22

    すみません、コメントをいただいたのに反応が遅くなってしまいました。。。そうでしたか!

    はい、またチャンスがあればチャレンジされてみてください :D

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る