如何使用 Angular 和 ajax 用 JSON 填充表格？ [复制]答案

【问题标题】：How to fill the table with JSON using angular and ajax? [duplicate]如何使用 Angular 和 ajax 用 JSON 填充表格？ [复制]
【发布时间】：2015-09-18 04:24:12
【问题描述】：

我正在开发烧瓶应用程序。我制作了一张将填充 JSON 数据的表格。对于前端，我使用的是 Angularjs，而对于后端，我使用的是烧瓶。但我无法填充表格并收到类似“UndefinedError: 'task' is undefined.”的错误

flask 项目目录
烧瓶项目/ 休息服务器.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 数据 http://127.0.0.1:5000/todo/api/v1.0/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"
    }
  ]
}

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  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>

【问题讨论】：

您的服务器响应是一个对象，在该对象内部是任务数组。试试angular.copy(data.tasks, $scope.tasks); 或$scope.tasks = angular.copy(data.tasks);（同样的事情）。
$scope.tasks 得到了什么？
@victmo 感谢您的回复，但仍然遇到同样的错误..
请你制作一个小提琴好吗？
@Vineet 在小提琴中我们无法创建烧瓶应用程序，这里我们使用的是rest api..

标签： python ajax json angularjs flask

【解决方案1】：

我认为这是因为您的 index.html 中有两个 ng-app 定义

删除 html 标签中的定义，然后重试

<html ng-app="tableJson">

进入

<html>

【讨论】：

这就是问题所在，你有两个 ng-app 定义。我可以确认。

【解决方案2】：

试试这个

$scope.tasks = data;

对我有用

【讨论】：

【解决方案3】：

您应该使用 Angular 服务从服务器获取数据。

【讨论】：