Twitter Bootstrap Question posted in

ng-repeat returns blank rows into table-Twitter bootstrap

I am trying to populate a table with JSON data from my Django rest framework API utilizing http.get(). I cannot seem to get it to return anything besides the number of blank rows that I have data for. i.e. There are 9 reservations and I get nine blank rows. I do get the data back from the server on the console. I cannot figure out what I am doing wrong! 

<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)                    
            });    
    }    
});

enter image description here}

This code produces nine blank rows.

I can get the data to the console but I need to get it into the table and eventually will need to be able to edit that data inline. (long term goal)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After playing around for a bit with the information that was provided I finally got it to load into the table correctly!

    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;
            });
    }
});

    For whatever reason, I needed to create a new js file and a new module and controller but it works! Thank you for the help!


  2. 0
    1. you are missing a curly bracket in your myReservationController,
      $scope.saveData is not closed.
    2. $scope.getData function is expecting a “data” variable
    3. what you are doing in your own answer is wrong. As soon as, you use “angular.module(‘myApp’, [])” for the second time it invalidates the first one.
    4. And, I don’t think you can call “angular.module(‘myApp’, [])” inside a controller

    It is somehow working right now, but it will cause a problem, in the future.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search