2

私は Flask フレームワーク (およびクライアント サーバー全般) を使用する初心者なので、ご容赦ください。PythonファイルからJSONオブジェクトを渡すFlask({% ... %}表記を使用)を少し含む基本的なHTMLテンプレートファイルがあります。現在、単純な健全性チェックとして、motifs(配列の配列)の内容を<li>、順序付けられていないリスト ( <ul>) の個別の行 ( ) として出力しています。

代わりmotifsに、JavaScript スクリプトで配列の配列を、実行しようとしているビジュアライゼーションのデータとして使用します。<script>JavaScript 配列を反復処理する JavaScript タグに Flask スクリプトを混ぜようとしましたが、スクリプト タグが Flask 表記 ( Uncaught SyntaxError: Unexpected token }. JavaScriptスクリプト?私はここでいくつかのことを誤解している可能性があることに気づきました(おそらくJSONの性質?).正しい方向への微調整に感謝します.ありがとう!

以下に、順序付けられていないリストを作成する Flask スクリプトを含む html テンプレートを含めました。Flask スクリプトを<script>タグで使用しようとして失敗した試みも含めました。では、JavaScript で配列 (JSON) に正常にアクセスするにはどうすればよいでしょうか?

index.html (テンプレート ファイル - ここではわかりやすくするために簡略化しています):

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>

<p>Here are some motifs:</p>
    <ul>
        {% for motif in motifs %}
        <li>{{motif}}</li>
        {% endfor %}
    </ul>
<script>one of a few js scripts</script>
</body>
</html>

上記のファイルの出力は次のようになります (コピーされなかった箇条書きがありません)。

ここにいくつかのモチーフがあります：

{'gene1': 1、'gene2': 1、'gene3': 7、'gene4': 7、'gene5': 1}

{'gene1': 7、'gene2': 4、'gene3': 10、'gene4': 5、'gene5': 2}

{'gene1': 7、'gene2': 1、'gene3': 8、'gene4': 5、'gene5': 8}

{'gene1': 2、'gene2': 4、'gene3': 6、'gene4': 1、'gene5': 9}

{'gene1': 3、'gene2': 8、'gene3': 2、'gene4': 7、'gene5': 8}

{'gene1': 1、'gene2': 5、'gene3': 1、'gene4': 9、'gene5': 5}

{'gene1': 3、'gene2': 5、'gene3': 6、'gene4': 10、'gene5': 9}

{'gene1': 2、'gene2': 10、'gene3': 7、'gene4': 5、'gene5': 10}

{'gene1': 5、'gene2': 5、'gene3': 10、'gene4': 10、'gene5': 5}

{'gene1': 10、'gene2': 4、'gene3': 4、'gene4': 6、'gene5': 4}

<script>以下は、 Flask によって渡された配列 (JSON オブジェクト)にアクセスしようとして失敗したものです。

<script>
var motifValuesArray = [];
var index = 0; // an iterator to assign indexes in the javascript array
{% for motif in motifs %}
    motifValuesArray[index] = {motif};
    console.log(motifValuesArray[index]);
{% endfor %}        
</script>
4

2 に答える 2

3

あなたの<script>試行が失敗した理由は、Web ブラウザーで jinja2 コード (デフォルトでフラスコに付属するテンプレート エンジン) を実行しようとしているからです。Web ブラウザーには、python インタープリターはもちろん、python の上に構築されたテンプレート エンジンもありません。

そうは言っても、フラスコからクライアントに JSON 配列を取得する方法はいくつかあります。おそらく最も簡単な方法は、配列を直接 HTML として渡し、HTML を解析することです。しかし、それはあまり巧妙ではなく、配列が非常に大きくなると非常に遅くなる可能性があります。

徹底的にするために、このSOの答えは、jinja2から直接物事を行う方法を説明しています.

私の例では、ページの読み込み時に呼び出される JavaScript 関数を作成します。この JavaScript 関数は、flask アプリケーションへの ajax 呼び出しを行い、JSON 形式で配列を受け取り、最後にオブジェクトを解析して配列を返します。

Javascript

$(document).ready(function() {
    var request = $.ajax({
        type: "POST",
        url: "/example_array/",
        data: {"name":""}, // if you wanted to specifiy what list then pass an actual name
        dataType: "html"
    });

    request.done(function(JSON_array) {
        array_data = JSON.parse(JSON_array)["array"]
        //from here you have your array to play with
    });
});

フラスコファイル

from flask import jsonify

@app.route("/example_array/")
def example():
    list = get_list() # however you get your list data, put it here
    return jsonify(array=list)

@app.route("/")
def index():
     return render_template("home_page.html")
于 2013-09-17T01:12:17.087 に答える
0

json.dumpsモチーフ ディクショナリが適切な JSON であることを確認するために使用します。

try: 
  import simplejson as json
except:
  import json

...

motifValuesArray[index] = {{json.dumps(motif)}};
于 2013-09-16T19:26:13.037 に答える