¿Cómo rellenar una tabla con datos json con ayuda de ajax y angularjs?

Estoy desarrollando la aplicación matraz. Hice una tabla que rellenará con datos JSON. Para Front end estoy usando Angularjs y para back-end estoy usando matraz. Pero no puedo rellenar la tabla y aparece un error como ” UndefinedError: ‘task’ no está definido.

Directorio de proyecto matraz
flask_project / rest-server.py
templates / index.html

rest-server.py

#!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]}) 

Con éxito puedo obtener datos json utilizando http://127.0.0.1:5000/todo/api/v1.0/tasks
Json array es

 { "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" } ] } 

Index.html

         

Look at the list of items!

Description Done Title URI
{{task.description}} {{task.done}} {{task.title}} {{task.uri}}
(function () { //create our module angular.module('app', []) //add controller .controller('ItemController', function ($scope, $http) { //declare an array of items. this will get populated with our ajax call $scope.tasks = []; //declare an action for our button $scope.getItems = function () { //perform ajax call. $http({ url: "/todo/api/v1.0/tasks", method: "GET" }).success(function (data, status, headers, config) { //copy the data we get to our items array. we need to use angular.copy so that //angular can track the object and bind it automatically. angular.copy(data.tasks, $scope.tasks); }).error(function (data, status, headers, config) { //something went wrong alert('Error getting data'); }); } }); console.log($scope.tasks); })();

Si está rellenando sus datos en los items[] ,

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

Luego iterarlo como

    {{task.description}} {{task.done}} {{task.title}} {{task.uri}}