2017-08-27 19 views
0

D3スクリプトを使用してFlaskビルドサイトにpie chartsを表示し、JSONを使用してこれらの円グラフにデータを提供しています。しかし、私はそれを開いたときに、私のD3-パワードサイトからのエラーメッセージが出てい:FlaskエンドポイントからJSONを取得する

マイD3動力の.jsファイルは、円グラフのためのJSONを取得し、この行が含まれ

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data 

var json_data = "http://the.site/dashboard-data" 
をフラスコ搭載の「app.py」ファイル内

私のPythonコードは(私のJSONを含むエンドポイントのために特別に)次のようになります。

@app.route('/dashboard-data') 
def display_dashboard_data(): 
    parent_path = '\\'.join(os.path.realpath(__file__).split('\\')[:-1]) 
    file_path = os.path.join(parent_path, 'static\\js\\default_data.json') 
    with open(file_path, 'r') as file_data: 
     json_data = json.load(file_data) 
    return render_template('dashboard_data.html', data=json_data) 

JSONは問題なく表示されますが、私の仮定はということです前の複雑なサイトエラーは二重引用符の代わりに一重引用符が存在するために発生します。また、JSONがHTMLタグ内に格納されている可能性もあります。ここではJSONを含むサイトは次のようになります。

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="application/json" charset="UTF-8"> 
    </head> 
    <body> 
     {&#39;data&#39;: [{&#39;id&#39;: [...the rest of the JSON is found here.] 
    </body> 
</html> 

そこで質問はこれです:私のD3ページに、このJSONを果たすための最良の方法は何ですか?

注:Github Gistを使用してD3コードを開発しました。これは、JSONファイルでコンテンツを表示する際に非常に便利な「Raw」オプションを備えています。その生のエンドポイントには、私のアプリケーションにはない.json拡張子(thisに似ています)があります。私自身のアプリケーションで "Raw"エンドポイントを模倣する方法はありますか?

答えて

3

JSON応答を返す別個のエンドポイントを作成することを検討する必要があります。クライアント側のJavaScriptコードを有する

@app.route('/artists') 
def artists(): 
    parent_path = '\\'.join(os.path.realpath(__file__).split('\\')[:-1]) 
    file_path = os.path.join(parent_path, 'static\\js\\default_data.json') 
    with open(file_path, 'r') as file_data: 
     json_data = json.load(file_data) 
    return jsonify(json_data) 

この方法では、JSONでデータを取得するには、このエンドポイントへのリクエストは、手間をかけずに行うことになります。

関連する問題