如何填充JSON数据表Ajax和angularjs的帮助？ [英] How to populate table with json data with help of ajax and angularjs?
本文介绍了如何填充JSON数据表Ajax和angularjs的帮助？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我开发烧瓶应用程序。我做了一个表，将与JSON数据填充。对于前端我使用Angularjs和后端我使用的烧瓶中。但我不能够填充表，并得到错误，如 UndefinedError：'任务'是未定义
烧瓶项目的目录结果
flask_project /
rest-server.py结果
模板/ index.html的
rest-server.py
＃！瓶/箱/蟒蛇
进口6
从瓶进口瓶，jsonify，中止，请求，make_response，url_for，render_template应用=瓶（__ name__，static_url_path =）
AUTH = HTTPBasicAuth（）任务= [
{
'ID'：1，
标题：u'Buy杂货，
说明：u'Milk，奶酪，比萨，水果，泰诺，
完成：假
}，
{
'ID'：2，
标题：u'Learn Python的，
说明：u'Need找到在网络上一个良好的Python教程，
完成：假
}
]
@ app.route（/）
高清指数（）：
返回render_template（'的index.html'）@ app.route（'/ TODO / API / 1.0 /任务，方法= ['GET']）
高清get_tasks（）：
返回jsonify（{'任务'：[在任务任务make_public_task（任务）]}）
我能够成功使用得到JSON数据
http://127.0.0.1:5000/todo/api/v1.0/tasks 结果
JSON数组是
{
任务：
[
{
说明：牛奶，奶酪，比萨，水果，泰诺
完成：假的，
头衔：买菜
URI：http://127.0.0.1:5000/todo/api/v1.0/tasks/1
}，
{
说明：需要在网上找到一个良好的Python教程，
完成：假的，
头衔：学习Python
URI：http://127.0.0.1:5000/todo/api/v1.0/tasks/2
}
]
}
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT;链接HREF =https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;！ - 我们的控制器 - ＆GT;
＆LT; DIV NG控制器=ItemController＆GT;
＆LT;按钮ID =获得项键NG点击=getItems（）＆GT;获取项目＆lt; /按钮＆GT;
＆LT; P＆GT;再看项目列表＆LT;！/ P＆GT;
＆LT;！ - 此表显示我们从我们的服务中获得的物品 - ＆GT;
＆所述;表CELLPADDING =0CELLSPACING =0＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i说明＆LT; /第i
＆LT;第i完成＆LT; /第i
＆LT;第i个标题＆LT; /第i
＆LT;第i URI＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT;！ - 重复此表行中的任务每个任务 - ＆GT;
＆LT; TR NG重复=任务，任务＆GT;
＆所述; TD＆GT; {{task.description}}＆下; / TD＆GT;
＆所述; TD＆GT; {{task.done}}＆下; / TD＆GT;
＆所述; TD＆GT; {{task.title}}＆下; / TD＆GT;
＆所述; TD＆GT; {{task.uri}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT;脚本＆GT;
（函数（）{ //创建我们的模块
angular.module（'应用'，[]） //添加控制器
.controller（'ItemController'，函数（$范围，$ HTTP）{ //申报物品的阵列。这将让填充我们的AJAX调用
$ scope.tasks = []; //声明的行动为我们的按钮
$ scope.getItems =功能（）{ //执行Ajax调用。
$ HTTP（{
网址：/todo/api/v1.0/tasks
方法：GET
}）。成功（功能（数据，状态，头，配置）{ //拷贝我们得到我们的项目数组中的数据。我们需要使用angular.copy使
//角可以跟踪对象，并自动绑定。
angular.copy（data.tasks，$ scope.tasks）;
}）错误（功能（数据，状态，头，配置）{
//出了些问题
警报（'错误中获取数据'）;
}）;
} }）;
的console.log（$ scope.tasks）;
}）（）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
如果您是填充你的数据项目[] ，
//申报项目的数组。这将让填充我们的AJAX调用
$ scope.items = [];
然后，它作为迭代，
＆LT;＆TBODY GT;
＆LT;！ - 重复此表行中的项目每个项目 - ＆GT;
＆LT; TR NG重复=任务tasks.items＆GT;
＆所述; TD＆GT; {{task.description}}＆下; / TD＆GT;
＆所述; TD＆GT; {{task.done}}＆下; / TD＆GT;
＆所述; TD＆GT; {{task.title}}＆下; / TD＆GT;
＆所述; TD＆GT; {{task.uri}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
I am developing flask app. I made one table which will populate with JSON data. For Front end I am using Angularjs and for back-end I am using flask. But I am not able to populate the table and getting error like "UndefinedError: 'task' is undefined."
Directory of flask project
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]})
I am successfully able to get json data using
http://127.0.0.1:5000/todo/api/v1.0/tasks
Json array is
{
"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
<!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>
<!--our controller-->
<div ng-controller="ItemController">
<button id="get-items-button" ng-click="getItems()">Get Items</button>
<p>Look at the list of items!</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 task in tasks-->
<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>
解决方案
If you are populating your data to items[],
//declare an array of items. this will get populated with our ajax call
$scope.items = [];
Then iterate it as ,
<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>
这篇关于如何填充JSON数据表Ajax和angularjs的帮助？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
