Question

我已经在网络开发的这个特定部分停留了一段时间，似乎无法弄清楚如何正确地做到这一点。有时它打印出undefined，有时候如果我改变了什么，它就会打印出Object。

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

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

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

这是我目前使用的剧本

$(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的新手，所以这可能看起来写得很糟糕。我通常会在后端开发。我真的只需要克服抓住我想要的数据的障碍。

Answer 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 dict（例如{"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数据的示例。并告诉我们你在控制台中得到了什么。

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

1 个答案: