在烧瓶端点中为d3脚本使用json数据

时间:2018-11-03 12:25:58

标签: json d3.js flask

我对Flask和d3相当陌生,但是在使用d3.json从api将json加载到d3函数中时遇到了一些困难

我正在广泛尝试按照此处提供的API进行操作: https://realpython.com/web-development-with-flask-fetching-data-with-requests/

这是我的run.py文件:

from flask import Flask, render_template, jsonify
from harvest_scraper import api_scraper

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/data')
def data():
    return jsonify(api_scraper())

我可以确认,当我运行该应用程序并转到/data端点时,我会获得有效的json和要在d3可视化中使用的数据。

我是否正确地认为我可以将该端点用作URL以将json加载到模板页面上的任何d3脚本中?

这是我目前拥有的index.html模板:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d3 api example</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>

</head>
<body>

<script>

    d3.json('/data', function(data) {
        console.log(data);
        });

</script>




</body>
</html>

我在这里期望的是我的/页向api调用的/data页和console.log的json请求。

目前,我在/页上看不到任何内容,并且无法在index.html模板中的任何d3脚本中使用此数据。我也没有看到任何引发的错误。

我认为有些事情我要么不理解返回的json的格式,要么不了解从端点访问数据的方式。

1 个答案:

答案 0 :(得分:0)

您可以详细了解问题here

简而言之,解决您的问题的方法是:

d3.json('/data')
  .then(function(data){
       console.log(data);
   });