Question

我希望能够遍历jQuery的结果。我在this教学示例中工作：

{% extends "header.html" %}
{% block body %}
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type=text/javascript>
            $(function() {
              $('a#process_input').bind('click', function() {
                $.getJSON('/background_process', {
                  proglang: $('input[name="proglang"]').val(),
                }, function(data) {
                  $("#result").text(data.result);
                });
                return false;
              });
            });
        </script>
    </head>

    <body>
        <div class='container'>
        <h3>Welcome! Which is the best programming language of them all?</h3>
            <form>
                <input type=text size=5 name=proglang>
                <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
            </form>
        <p id=result></p>
        </div>
    </body>
{% endblock %}

我尝试修改它以返回列表，保存并循环遍历它，但这似乎不起作用。以下是我尝试过的相关部分：

, function(data) {
          mylist = $("#result");

          {% for myobj in mylist %}

          <p>{{myobj.textstring}}</p>

          {% endfor %}
                });
                return false;
              });
            });

如何返回并循环列表？

Answer 1

, function(data) {
          mylist = $("#result");

          {% for myobj in mylist %}

          <p>{{myobj.textstring}}</p>

          {% endfor %}
                });
                return false;
              });
            });

这不起作用 - 您尝试对视图中未定义但仅在Javascript中定义的变量使用Jinja模板处理{%和%}。

您可以使用jQuery（docs）迭代结果集。以下是未经测试但应该是一个很好的起点。

, function(data) {
          mylist = $("#result");

          $(mylist).each(function () {
              document.write("<p>" + this.textstring + "</p>"); // or similar
          });

          return false;

});

Answer 2

我没有在JavaScript中循环遍历列表，而是将Flask中的函数设置为jsonify，并为可以插入页面的html div返回一个html jinja模板。所以在上面的脚本中：

a = {
  label: "xxxxxxx",
  active: false,
  doThatThang: function(val) {
    //some code
  }
};

成为：

df.set_index(["data","repair_id"]).unstack(fill_value=0).stack().reset_index()      



        data repair_id  num_onsite  num_offsite
0 2016-02-01         A         3.0          0.0
1 2016-02-01         B         2.0          1.0
2 2016-02-01         C         0.0          0.0
3 2016-02-01         D         0.0          4.0
4 2016-02-01         E         0.0          0.0
5 2016-02-02         A         1.0          3.0
6 2016-02-02         B         0.0          0.0
7 2016-02-02         C         1.0          1.0
8 2016-02-02         D         0.0          0.0
9 2016-02-02         E         0.0          6.0

返回并循环使用List jQuery和Flask

2 个答案: