从烧瓶中获取 json 数据并将其打印在 html 模板上答案

【问题标题】：Grabbing json data from flask and printing it on an html template从烧瓶中获取 json 数据并将其打印在 html 模板上
【发布时间】：2015-07-01 19:00:43
【问题描述】：

我已经在 Web 开发的这一特定部分停留了一段时间，似乎无法弄清楚如何正确地做到这一点。有时它会打印出 undefined，有时如果我更改某些内容，它只会打印出 Object。

我有一个应用程序路由，它返回一个 jsonified 字典数组：

    @app.route('/test/resumes')
def test_page():
    j = get_resumes()
    return flask.jsonify(j=j)

我希望能够通过 js、jquery 和 ajax 在我的 html 代码中使用这些数据。

这是我目前使用的脚本

$(document).ready(function(){
        $.getJSON("/test/resumes",function(data){
            var items =  [];
            $.each(data, function(key, value){
                items.push('<li id=" ' + key + '">' + value+ '</li>');
            });
            $('<ul/>', {
                'class': 'interest-list',
                html : items.join('')
            }).appendTo('body')


        });


    });

这是我得到的一些输出

Object],[object Object],[object Object],[object Object],[object Object], 
[object Object],[object Object],[object Object],[object Object],[object

我统计了输出中逗号的数量，它等于数据表中的行数

我还是 js 新手，所以这可能看起来写得很糟糕。我通常在后端开发。我真的只需要克服这个获取我想要的数据的障碍。

【问题讨论】：

标签： javascript jquery python json flask

【解决方案1】：

根据您创建的 JSON，此示例必须适应您的。

在视图中，您只需像以前一样传递数据，我只是添加了它，这样您就可以看到 JSON 数据是如何查找我的。

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

@app.route('/json',methods=['GET','POST'])
def json():
   j = [{"id":1, "username":"john"},{"id":2,"username":"doe"}]
   return jsonify(j=j)

在 HTML 中，您首先需要提取 JSON 数据的 j 部分。在 Javascript 代码中，您发送的对象将类似于 { j: [{..},{..}] }。然后当您遍历j 的列表时，键将是列表索引，值将是 JSON 字典（例如 {"id":1, "username":"john"}）

index.html

<!DOCTYPE html>

<html lang="en">
   <head>
      <title>Test</title>
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="application/javascript">
     $(document).ready(function(){
        $.getJSON("/json",function(data){
            console.log(data.j);
            var items =  [];
            $.each(data.j, function(key, value){
            console.log(key);
            console.log(value);
            items.push('<li id=" ' + value.id + '">' + value.username+    '</li>');
        });
        $('<ul/>', {
            'class': 'interest-list',
            html : items.join('')
        }).appendTo('body')
        });
    });
    </script>
   </head>
   <body>
      <p> Text! </p>    
   </body>
</html>

这是我的代码的完整示例，它将显示两个项目符号的列表，名称为 john 和 doe。我在 javascript 中添加了 console.log 消息，所以如果您在网页上看不到任何内容，请检查控制台（在 chrome 中，我认为您按 CTRL+shift+i ，然后选择控制台）

如果这对您没有帮助，您需要提供一个您尝试显示的 JSON 数据的示例。并告诉我们您在控制台中得到了什么。

【讨论】：

我试过这个确切的代码，网页什么也没有显示
我已经添加了我的测试应用程序的完整示例，这对我有用。如果它对您不起作用，您需要提供更多关于它为什么不起作用的信息。检查浏览器中的控制台是否有任何错误消息或我添加的日志消息。当代码为我工作时，我很难调试出现在你身上的问题。 @BigBoy
如果它不起作用，请粘贴您的 get_resumes() 返回的 JSON。
请提及导入的头文件。会有帮助的。