Python 如何使用angular和ajax用JSON填充表格?
我正在开发烧瓶应用程序。我制作了一个表,它将填充JSON数据。对于前端,我使用Angularjs,对于后端,我使用flask。但我无法填充该表,并出现类似“未定义错误:'task'未定义”的错误。” 烧瓶项目目录Python 如何使用angular和ajax用JSON填充表格?,python,ajax,json,angularjs,flask,Python,Ajax,Json,Angularjs,Flask,我正在开发烧瓶应用程序。我制作了一个表,它将填充JSON数据。对于前端,我使用Angularjs,对于后端,我使用flask。但我无法填充该表,并出现类似“未定义错误:'task'未定义”的错误。” 烧瓶项目目录 拉斯库项目/ rest服务器.py 模板/index.html rest server.py #!flask/bin/python import six from flask import Flask, jsonify, abort, request, make_response, u
拉斯库项目/ rest服务器.py
模板/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]})
我能够使用
Json数组是
{
"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"
}
]
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-ng-app="app">
<!--our controller-->
<div ng-controller="ItemController">
<button id="get-items-button" ng-click="getItems()">Get Items</button>
<p>Look at the list of tasks!</p>
<!--this table shows the items we get from our service-->
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
<th>Title</th>
<th>URI</th>
</tr>
</thead>
<tbody>
<!--repeat this table row for each item in items-->
<tr ng-repeat="task in tasks">
<td>{{task.description}}</td>
<td>{{task.done}}</td>
<td>{{task.title}}</td>
<td>{{task.uri}}</td>
</tr>
</tbody>
</table>
</div>
<script>
(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);
})();
</script>
</body>
</html>
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"
}
]
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-ng-app="app">
<!--our controller-->
<div ng-controller="ItemController">
<button id="get-items-button" ng-click="getItems()">Get Items</button>
<p>Look at the list of tasks!</p>
<!--this table shows the items we get from our service-->
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
<th>Title</th>
<th>URI</th>
</tr>
</thead>
<tbody>
<!--repeat this table row for each item in items-->
<tr ng-repeat="task in tasks">
<td>{{task.description}}</td>
<td>{{task.done}}</td>
<td>{{task.title}}</td>
<td>{{task.uri}}</td>
</tr>
</tbody>
</table>
</div>
<script>
(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);
})();
</script>
</body>
</html>
获取项目
看看任务列表
描述
多恩
标题
URI
{{task.description}
{{task.done}
{{task.title}}
{{task.uri}
(功能(){
//创建我们的模块
角度.module('app',[])
//添加控制器
.controller('ItemController',函数($scope,$http){
//声明一个项目数组。这将由我们的ajax调用填充
$scope.tasks=[];
//为我们的按钮声明一个操作
$scope.getItems=函数(){
//执行ajax调用。
$http({
url:“/todo/api/v1.0/tasks”,
方法:“获取”
}).success(函数(数据、状态、标题、配置){
//将获得的数据复制到items数组。我们需要使用angular.copy以便
//angular可以跟踪对象并自动绑定它。
复制(data.tasks,$scope.tasks);
}).error(函数(数据、状态、标题、配置){
//出了点问题
警报(“获取数据时出错”);
});
}
});
//log($scope.tasks);
})();
我认为这是因为index.html中有两个ng应用程序定义
请删除html标记中的定义,然后重试
<html ng-app="tableJson">
进入
试试这个
$scope.tasks = data;
它适用于我您应该使用角度服务从服务器获取数据。您的服务器响应是一个对象,在该对象中是任务数组。尝试
angular.copy(data.tasks,$scope.tasks)
或$scope.tasks=angular.copy(data.tasks)代码>(同样的事情)。你在$scope.tasks
中得到了什么?@victmo感谢您的回复,但仍然得到了相同的错误。请创建一个fiddle好吗?@vinet in fiddle我们无法创建flask应用程序,这里我们使用的是rest api。这就是问题所在,你有两个ng应用程序定义。我可以证实这一点。