CODEWITHSUNDEEP
javascriptphpjquerymysqlangularjs
YaeVo
YaeVo

Reputation: 61

AngularJS doesn't display MySQL results *edited

The view for an overview (root.html) of MySQL data doesn't show data. Opening /php/overview.php however indicates that the data could be fetched correctly:

Connection to MySQL server successful. [{"Job_title":"flash","Job_id":"doggg"},{"Job_title":"ad34","Job_id":"teeee"}]

root.html

<table class="setup-table">
    <tr>
        <td>Job title</td>
        <td>Job ID</td>
    </tr>
    <tr data-ng-repeat="campaign in campaigns">
        <td>A {{campaign.Job_title}}</td>
        <td>B {{campaign.Job_id}}</td>

    </tr>
</table>

controller.js (Note that the alert "It WORKED (DELETE Later)" shows up, but the table in the view is empty:

ctr.controller
('RootCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http)

                {

                    $http.get("php/overview.php")
                        .then(function successCallback(response){
                            console.log(response);
                            $scope.campaigns = response.data;
                            alert("It WORKED (DELETE ME)");

                        }
                        , function errorCallback(response) {
                            $scope.campaigns = "error in fetching data";
                            alert("DID NOT WORK ");}
                            )
                        ;}

                ]);

overview.php

<?php
include_once('db.php');

$query = "SELECT Job_title, Job_id FROM campaign";
$result = $connect->query($query);
$data = array();

while ($row = mysqli_fetch_array($result,MYSQL_ASSOC)) {
    $data[] = $row;
}
print json_encode($data);
mysql_close($connect);

?>

Upvotes: 1

Views: 670

Answers (1)

Mike Feltman
Mike Feltman

Reputation: 5176

Most of the time when you get a server route you receive a full response object in reply rather than just the requested data, so changing the section of your code that makes this call to look like this:

{
    $http.get("php/overview.php")
     .success(function(response){
         console.log(response);
         $scope.campaigns = response.data;
         alert("It WORKED (DELETE Later)");
      })
      .error(function() {
          $scope.campaigns = "Could not fetch data";
          alert("DID NOT WORK (DELETE Later");
      });
}

should do the trick. I also added a console.log call so you can inspect the response.

Note: success and error are deprecated. It's recommended that you use .then() in response to a $http call. The refactoring is very minor.

Upvotes: 1

Related Questions