不使用烧瓶在网页中显示表格答案

【问题标题】：Not displaying the table in web page using flask不使用烧瓶在网页中显示表格
【发布时间】：2018-05-18 06:08:59
【问题描述】：

您好，我正在使用烧瓶在 python 中创建一个 Web 应用程序。在模板目录中的 profile.html 页面中，我有 profile.html，如下所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.js"></script>
    <script src="../static/js/getAcademic.js"></script>
  </head>

  <body>

      <div class="jumbotron">
      </div>

  </body>
</html>

在 app.py 中，

@app.route('/getDetails')
def getDetails():
    try:
        #get data from mysql database and convert to a json and return

        return json.dumps(academic_dict)

    except Exception as e:
        return render_template('error.html', error=str(e))

返回的json对象如下，

在我的js文件中，

$(function() {
    $.ajax({
        url: '/getDetails',
        type: 'GET',
        success: function(res) {
            var div = $('<table>')
                .attr('class', 'list-group')
                .append($('<tr>')
                    .attr('class', 'list-group-item active')
                    .append($('<td>')
                        .attr('class', 'list-group-item-text'),
                        $('<td>')
                        .attr('class', 'list-group-item-text')));


            var wishObj = JSON.parse(res);
            var wish = '';

            $.each(wishObj,function(index, value){
                wish = $(table).clone();
                $(wish).find('td').text(value.Title);
                $(wish).find('td').text(value.Data);
                $('.jumbotron').append(wish);
            });
        },
        error: function(error) {
            console.log(error);
        }
    });
});

json 已正确转换并返回，但数据未显示在 profile.html 页面中。我检查了控制台，它在 .js 文件中显示错误 Uncaught ReferenceError: table is not defined。

我想显示一个表格，其中的数据作为 json 对象返回，但在 profile.html 页面加载时表格没有显示。请帮我解决这个问题。

【问题讨论】：

请分享 profile.html，虽然错误很明显：wish = $(table).clone();;这里table确实没有定义。
@AArias 我用 profile.html 编辑了问题

标签： javascript html python-3.x flask

【解决方案1】：

你在wish = $(table).clone(); 行有一个简单的错误（但别担心，每个人都会遇到这种情况......） - 你使用table 来引用你保存在变量div 中的<table>。

要么将$(table) 替换为$(div)，要么（我建议此解决方案以提高可读性）将开头的var div = $('<table>') 重命名为var table = ...

（抱歉恢复这么旧的帖子，但我正在寻找徽章:]）

哦，还有一点：请不要使用代码截图，而是代码本身（甚至只是缩短）让我们测试您的问题和我们的解决方案：

[{'Title': 'Name', 'Data': 'john mark'},
{'Title': 'Faculty', 'Data': 'cs'}]`

【讨论】：