Question

我正在尝试使用http.get（）从Django rest框架API中使用JSON数据填充表。我似乎无法获得它返回除我具有数据的空白行数以外的任何内容。即有9个预订，我得到9个空白行。我确实从控制台上的服务器获取了数据。我无法弄清楚我在做什么错！

<html ng-app="myReservation" ng-controller="myReservationController">
<head>
  <meta charset="utf-8">
  <title>Waitlist</title>
    {% load staticfiles %}

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <table  class="table table-striped table-bordered" style="width:100%">

              <thead>
                <tr>
                  <th>id</th>
                  <th>Name</th>
                  <th>Party Size</th>
                  <th>Date</th>
                  <th>Time</th>
                  <th>Location</th>
                  <th>Status</th>
                </tr>
              </thead>
                <tbody>
                  <tr ng-repeat="x in reservationsData">
                    <td>{{ x.id }}</td>
                    <td>{{ x.name }}</td>
                    <td>{{ x.psize }}</td>
                    <td>{{ x.Date }}</td>
                    <td>{{ x.Time }}</td>
                    <td>{{ x.location }}</td>
                    <td>{{ x.status }}</td>
                  </tr>
                </tbody>

        </table>
      </div>
    </div>
  </div>

    <script src="//code.jquery.com/jquery-3.3.1.js"></script>

    <label class="col-md-4 control-label" for="makeReservation"></label>
          <div class="col-md-4">
            <button name="singlebutton" class="btn btn-primary" type="submit" ng-click="getData()" id="makeReservation">getData!</button>
          </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  <script src="{% static 'app/scripts/reservations.js' %}"></script>
</body>

app.controller('myReservationController', function ($scope, $http) {
    $scope.saveData = function () {
        var dte = Date.parse($scope.dateInput);
        var newdte = new Date(dte).toISOString().slice(0, 10);
        var data = { name: $scope.nameInput,
                     psize: $scope.psizeInput,
                     Date: newdte,
                     Time: $scope.timeInput,
                     location: $scope.locationInput,
                     status: $scope.statusInput
        }

        $http.put('/reservations/reservations/', data).then(
            function successCallback(data) {
                alert('Your Reservation was made!');
                window.location.reload();
            }, function errorCallback(data) {
                alert("Sorry, we could not make your reservation at this time")
            });


    $scope.getData = function (data) {
        $scope.reservationsData = []
        $http.get("/reservations/reservations/")
            .then(function (result) {
                $scope.reservationsData = result.data.results;
                console.log($scope.reservationsData)                    
            });    
    }    
});

}

此代码产生九个空白行。

我可以将数据获取到控制台，但是我需要将其获取到表中，最终需要能够内联编辑该数据。（长期目标）

Answer 1

您在myReservationController中缺少大括号， $ scope.saveData没有关闭。
$ scope.getData函数需要一个“数据”变量
您根据自己的答案所做的事情是错误的。马上，您第二次使用“ angular.module（'myApp'，[]）”，它将使第一个无效。
而且，我认为您不能在控制器内调用“ angular.module（'myApp'，[]）”

目前正在某种程度上起作用，但将来会引起问题。

Answer 2

在仔细研究了所提供的信息之后，我终于把它正确地加载到了表中！

var app = angular.module('myApp', []).config(function ($httpProvider) {

$httpProvider.defaults.xsrfCookieName = 'csrftoken'
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'

});
app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});
app.controller('theReservationController', function ($scope, $http) {
    angular.module('myApp', []).config(function ($interpolateProvider) {

        $httpProvider.defaults.xsrfCookieName = 'csrftoken'
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'
    });

    $scope.getData = function (data) {
        $scope.reservationsData = []
        $http.get("/reservations/reservations/")
            .then(function (result) {
                $scope.reservationsData = result.data.results;
            });
    }
});

无论出于什么原因，我都需要创建一个新的js文件以及一个新的模块和控制器，但是它可以工作！谢谢您的帮助！

ng-repeat将空白行返回到表中

2 个答案: