web-dev-qa-db-ja.com

JSONオブジェクトをFlask=からJavaScriptに渡す

Flask/Python変数をJavascriptに渡すのに問題があります。

基本的に、MySQLからインポートし、3つの異なる方法でリターンをレンダリングしようとしました。

  1. _(43.8934276, -103.3690243), (47.052060, -91.639868), (45.1118, -95.0396)_これは、dict項目に次のものが実行されたときの出力です。

new_list = [Tuple(d.values()) for d in MySQL_Dict] output = ', '.join('(' + ', '.join(i) + ')' for i in new_list)

この方法は良くありませんが、詳細のために追加しました。正しい形式ではありません。

  1. python dictをこのようなテンプレートに直接渡します

_({'lat': '43.8934276', 'lng': '-103.3690243'}, {'lat': '47.052060', 'lng': '-91.639868'}, {'lat': '45.1118', 'lng': '-95.0396'})_

次に、テンプレート側で、次のJavaScript行を試しました

_ var other_coords = {{ MySQL_Dict|tojson }}; 
 var other_coords = {{ MySQL_Dict|tojson|safe }};
 var still_more = JSON.parse(other_coords);
_

一緒にまたは別々に機能するものはありません。

  1. また、機能しないjson_out = json.dumps(My_Dict)を使用してビューから辞​​書を送信しようとしました。

これはすべて、MySQL DBからGoogle Maps APIスクリプトに緯度経度座標を取得することを目的としています。私にとって非常に混乱しているのは、ビューからのjson.dumpの結果をGoogle Mapsスクリプトに貼り付けるだけで完全に機能することです（引用符を削除した後）が、変数を使用すると機能しません。誰か提案がありますか？

javascriptpythongoogle-mapsflaskjinja2
10
BrettJ

現在受け入れられている回答（@BrettJによる）にはセキュリティ上の欠陥がある可能性があります：javascriptに渡すオブジェクトに内部に単一引用符が含まれる文字列がある場合、この単一引用符は_json.dumps_によってエスケープされません。したがって、任意のコードをjavascriptに挿入できます。 Flaskのtojson()テンプレートフィルターを使用することをお勧めします。 the docs を参照してください。このような文字はすべて適切にエスケープされます（ユニコードコードで置き換えます）。

私の解決策は次のとおりです。

view.py

_from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    user = {'firstname': "Mr.", 'lastname': "My Father's Son"}
    return render_template("index.html", user=user)

if __name__ == '__main__':
    app.run()
_

index.html

_<p>Hello, <span id="username"></span></p>
<script>
    var user = JSON.parse('{{ user | tojson | safe}}');
    document.getElementById('username').innerHTML = user.firstname + " " +
            user.lastname;
</script>
_

生成されたJSは次のようになります。

_var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father\u0027s Son"}');
_

これは完全に安全です。たとえば、_json.dumps_- poweredソリューションを使用すると、次のようになります

_var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father's Son"}');
_

これは構文的に間違っています（控えめに言っても）。

23
Ilya V. Schurov

以下の簡単な例は、dictからJavascriptオブジェクトを取得する方法を示しています。

views.py

@app.route('/', methods=['GET','POST'])                                         
def index():                                                                    

    points = [{"lat": 43.8934276, "lng": -103.3690243},                         
              {"lat": 47.052060, "lng": -91.639868},                            
              {"lat": 45.1118, "lng": -95.0396}]                                

    return render_template("index.html", points=json.dumps(points))

index.html（簡潔にするために一部のコードを削除）

  function initMap() {                                                      

    var map = new google.maps.Map(document.getElementById('map'), {         
      center: new google.maps.LatLng(43.8934276, -103.3690243),             
      zoom: 4                                                               
    });                                                                     

    var points = JSON.parse('{{ points|safe }}');                           
    var marker;                                                             

    for (var i = 0; i < points.length; i++) {                               

        marker = new google.maps.Marker({                                   
          position: new google.maps.LatLng(points[i].lat, points[i].lng),   
          map: map                                                          
        });                                                                 

    }                                                                       
  }
2
Matt Healy