如何在ajax和angularjs的帮助下用json数据填充表?

时间:2015-07-01 05:35:24

标签: python ajax json angularjs flask

我正在开发烧瓶app。我创建了一个将填充JSON数据的表。对于前端我使用Angularjs而后端我使用烧瓶。但我无法填充表并收到错误,如“ UndefinedError:'task'未定义。

烧瓶项目目录
flask_project /      rest-server.py
     模板/ index.html中

rest-server.py

false

我成功地使用了json数据 http://127.0.0.1:5000/todo/api/v1.0/tasks
Json数组

#!flask/bin/python
import six
from flask import Flask, jsonify, abort, request, make_response, url_for, render_template 

app = Flask(__name__, static_url_path="")
auth = HTTPBasicAuth()

tasks = [
    {
        'id': 1,
        'title': u'Buy groceries',
        'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
        'done': False
    },
    {
        'id': 2,
        'title': u'Learn Python',
        'description': u'Need to find a good Python tutorial on the web',
        'done': False
    }
]
@app.route('/')
def index():
   return render_template('index.html')

@app.route('/todo/api/v1.0/tasks', methods=['GET'])
def get_tasks():
    return jsonify({'tasks': [make_public_task(task) for task in tasks]})

Index.html

{
  "tasks": 
  [
    {
      "description": "Milk, Cheese, Pizza, Fruit, Tylenol", 
      "done": false, 
      "title": "Buy groceries", 
      "uri": "http://127.0.0.1:5000/todo/api/v1.0/tasks/1"
    }, 
    {
      "description": "Need to find a good Python tutorial on the web", 
      "done": false, 
      "title": "Learn Python", 
      "uri": "http://127.0.0.1:5000/todo/api/v1.0/tasks/2"
    }
  ]
}

1 个答案:

答案 0 :(得分:1)

如果您要将数据填充到items[]

 //declare an array of items. this will get populated with our ajax call
                    $scope.items = [];

然后将其迭代为,

<tbody>
    <!--repeat this table row for each item in items-->
    <tr ng-repeat="task in tasks.items">
        <td>{{task.description}}</td>
        <td>{{task.done}}</td>
        <td>{{task.title}}</td>
                <td>{{task.uri}}</td>
    </tr>
</tbody>