Error Fetching Data From a PHP Server Running MySQL with Angular JS

Question

I am getting a [$http:baddata] error when my Angular app calls my php file. I'm not sure where the error is triggering exactly, but I believe it's a problem constructing the json object! I've attached all relevant code. Any help would be amazing. Thanks in advance :)

Angular documentation shows this

This is the PHP file which connects to my database and attempts to return a JSON formatting string back to the calling file

<?php 
echo '<script>console.log("Inside php file!")</script>';
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

require_once('mysqli_connect.php');

$query = "SELECT rideid, destination, price, capacity, userid, origin, departDate, vehicle FROM rides";

$result = @mysqli_query($dbc, $query);

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
     if ($outp != "") {$outp .= ",";}
    $outp .= '{"Origin":"'  . $rs["origin"] . '",';
    $outp .= '"Destination":"'   . $rs["destination"]        . '",';
    $outp .= '"Price":"'. $rs["price"]     . '"}';
    $outp .= '"Capacity":"'. $rs["capacity"]     . '"}';
}

$outp ='{"records":['.$outp.']}';
//echo '<script>console.log(JSON.stringify('.$outp.'))</script>';
$conn->close();

echo($outp);

This is the Angular app making the request to the PHP file

<html>
<head>
    <!-- Include Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>

<!-- Ride Table -->
     <div ng-app = "rideAppTest" ng-controller= "rideCtrlTest">
        <table>
          <tr ng-repeat = "x in names">
            <td>{{x.Origin}}</td>
            <td>{{x.Destination}}</td>
            <td>{{x.Price}}</td>
            <td>{{x.Capacity}}</td>
          </tr>
        </table>
     </div>
<!-- End Ride Table -->

<!--Ride Table Script-->
<script>
  var app = angular.module('rideAppTest', []);
  app.controller('rideCtrlTest', function($scope, $http) {
    $http.get("angularFilter.php")
    .then(
      function (response) {
        $scope.names = response.data.records;
      },
      function(data){
        console.log("Error!" + data);
      }

        );
});
</script>
</body>
</html>

Madhav Chaturvedi · Accepted Answer · 2017-09-30 21:01:45Z

2

Don't construct the JSON the way you are doing, first collect everything inside an array or an object then do echo json_encode($result);

Something like this:

$outp = [];
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    $outp[] = $rs;
}
echo json_encode(["records" => $outp]);

answered Sep 30, 2017 at 21:01

Madhav Chaturvedi

6216 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Madhav Chaturvedi Over a year ago

Thats fine, never construct JSON in that way, that isn't even the right way. It just complicates and increases LOC of your code.

Cory Crowley Over a year ago

Yes! Also, how did you format your code as a block in the comments? Stack exchange will only let me add a single line block?

Madhav Chaturvedi Over a year ago

select the entire code block and then click format button :)

Cory Crowley · Accepted Answer · 2017-09-30 21:24:06Z

0

Thank to @Madhav for the help. This is what ended up working for me :)

while($rs = mysqli_fetch_array($result)) {
        $myArray[] = array(
            'Origin' => $rs["origin"],
            'Destination' => $rs["origin"],
            'Price' => $rs["price"],
            'Capacity' => $rs["capacity"]

        );
    }
    echo json_encode(["records" => $myArray]);

answered Sep 30, 2017 at 21:24

Cory Crowley

3242 silver badges14 bronze badges

Collectives™ on Stack Overflow

Error Fetching Data From a PHP Server Running MySQL with Angular JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related