无法显示保存在phpmyadmin数据库中的文件详细信息

Question

I'm building a project with angular and php, I have a "file" table that I can upload files using only php. now I'm trying to retrieve all files details in my database. my error in the console is:

 angular.js:13550 SyntaxError: Unexpected token < in JSON at position 0
    at Object.parse (native)

can someone please check my code?

Php for displaying:

    <?php header('Content-Type: text/html; charset=utf-8');
  $connection = mysqli_connect('localhost','root','','hamatkin');

  mysqli_query($connection,"SET character_set_client = utf8");
  mysqli_query($connection,"SET character_set_connection = utf8");
  mysqli_query($connection,"SET character_set_results = utf8");

  if(!$connection){
    die("couldnt connect".mysqli_error);
  }
  $query = "SELECT * FROM `file` ";
  $queryResult = $connection->query($query);

  $queryResult2 = array();
  if($queryResult === FALSE) { die($connection->error); }
  if( $queryResult->num_rows>0){
    while($row = $queryResult->fetch_assoc()){
      $queryResult2[] = $row;
    }
  }
  $queryResult3 = json_encode($queryResult2);
   echo json_encode($queryResult3);
?>

Controller:

"use strict";

angular.module('dataSystem').controller('allPriceOffersCtrl', function($scope,$route,$location,$http) {
  $http({method:'GET', url:'api/customers-tab/get-all-priceOffers.php/'})
      .then(function(response) {
        var arr = JSON.parse(JSON.parse(response.data));
        $scope.files = arr;
      })

      // This will log you the error code and trace, if there is an error.

      .catch(function(err) {
        console.log('err', err)
      });

});

Html:

    <div class="table-responsive">
  <table  class="customer-list table table-striped">
    <thead>
      <tr>
        <th class="Column-Header">מספר</th>
        <th class="Column-Header">משו</th>
        <th class="Column-Header">שם מלא</th>
        <th class="Column-Header">ת.ז./עוסק מורשה</th>
        <th class="Column-Header">עיר</th>
        <th class="Column-Header">כתובת</th>
        </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in files">
        <!-- <td>{{$index + 1}}</td> -->
        <td>{{ x.id}}</td>
        <td>{{ x.name}}</td>
        <td>{{ x.mime}}</td>
        <td> {{ x.size}} </td>
        <td> {{ x.data}} </td>
        <td> {{ x.created}} </td>
        </tr>
    </tbody>
  </table>
</div>

Answer 1

Typical case of debug-unfriendly code.

First, you have to check if your $connection->query possibly returned an error, meaning, the return value is not a resultset but false. So

if($queryResult === false) {
    die($connection->error);
}

Even then you should have a "sane" result, meaning, you expect an array of arrays, so $queryResult2 at least should be initialized as an array:

$queryResult2 = array(); // before the while loop.

Also: You absolutely don't need to check the num_rows, just do the while loop, because it will just not do anything wrong if there are no rows. fetch is that smart!

As it turns out, the column date that is being ordered by, didn't exist.

After debugging for an ridiculously long time, we found out, that there's probably binary data stored in the database and the json_encode() returned false due to a "malformed utf8 character". The angularjs part had to be adapted to not decode / parse json too often. I was under the assumption, that no binary data was stored in the database. Let this be a warning, don't have any assumptions when debugging. Always check for error return values.

Debug-friendly code helps. Please, world, write debug-friendly code, because it isn't much of a hassle to do and debugging becomes as easy as putting the error message into some search engine and not let stackoverflow debug your code in the comments of your question.