Multiple requests to connection.php by angular code

Question

I want to connect with phpMyAdmin database. The problem is that the browser make multiple (50+) requests for this file and I don't know why. I have a 3 particular files:

• Connection.php => will connect to the database and execute a query
• controller.js => will do the get request with $http
• mypage.html => here do I want to print the request result (records)

My tag isn't printed at all. My application executes the .get multiple times but does not show any result.

1. Does anyone know why my application is making such an amount of calls?

2. How I can use my result records correctly?

    $query = "SELECT * FROM tbl_reservation"; mysqli_query($db, $query) or die('Error querying database.'); $result = mysqli_query($db, $query); $row = mysqli_fetch_array($result); echo json_encode($result); mysqli_close($db);?> 

 $scope.res = null; $scope.reservations = function() { if ($scope.res === null) { $http.get('js/angular/services/connection.php').success(function(records) { for (var i = 0; i < records.length; i++) { console.debug(records); } $scope.res = records.data; return $scope.res; }); } else { return $scope.res; } }; 

 <?php
    $db = mysqli_connect('localhost', 'root', 'root', 'reservationsystem')
            or die('Error connecting to MySQL server.');

    $query = "SELECT * FROM tbl_reservation";
    mysqli_query($db, $query) or die('Error querying database.');

    $result = mysqli_query($db, $query);
    $row = mysqli_fetch_array($result);

    echo json_encode($result);

    mysqli_close($db);?>

 <a ng-repeat="reservation in reservations()">{{reservation}}</a> 

Answer 1

The reason you are getting so many calls is because of this:

<a ng-repeat="reservation in reservations()">{{reservation}}</a>

This is not how ng-repeat is supposed to work. The way it's setup now, the function will be called infinite times. The only reason it stops at 50 is either because of built-in defaults in Angular, or your server that deny multiple repeated calls. You should be referencing the result of your $http call. NOT the function that makes the call.

<a ng-repeat="reservation in res">{{reservation}}</a>

Further, there is no point in having a return statement in your callbacks. $http returns a promise, NOT an array of data. That statement serves no purpose here:

$scope.res = null;

//returns a promise object, NOT results of query
$scope.getReservations = function() {
  if ($scope.res === null) {
    $http.get('js/angular/services/connection.php').success(function(records) {
      for (var i = 0; i < records.length; i++) {
        console.debug(records);
      }
      // this is all you need
      $scope.res = records.data;
    });
  } else {
    return $scope.res;
  }
};