AngularJS doesn't display MySQL results *edited

Question

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

?>

Have you inspected the data received? Is it what you expect? Do you see correct template in ng-view? Not much detail given regarding your problem — charlietfl
– charlietfl, Commented May 23, 2016 at 12:56
The array is empty is what i am guessing.. can you print the $scope.campaigns — Thalaivar
– Thalaivar, Commented May 23, 2016 at 13:10
I have added console log for data and campaigns but nothing appears in the firebug console. So it is empty I suppose. I'll add the php for writing content into the db. — YaeVo
– YaeVo, Commented May 23, 2016 at 13:52
@YaeVo see my answer. It should be correct, despite the comments to the contrary. — Mike Feltman
– Mike Feltman, Commented May 23, 2016 at 13:59

Mike Feltman · Accepted Answer · 2016-05-23 13:04:32Z

1

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.

answered May 23, 2016 at 13:04

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

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

14 Comments

charlietfl Over a year ago

OP is showing the php code that generates the json. There is no object with data property. It is nothing but an array of objects. Don't guess...read the OP code

Mike Feltman Over a year ago

I don't do PHP, but when I hit a .NET site that also just writes JSON out I get a full response object back. I don't know why that wouldn't be the case here. Thanks for the lecture though. It's no wonder so many developers find this site a turnoff and are afraid to ask and answer questions. Per the angular doc OP should receive a response object with data, status, headers, statustext and config members. docs.angularjs.org/api/ng/service/$http

sdemurjian Over a year ago

The angular $http function response always stores the data returned from the request in response.data. If the object had a data property, it would be accessed by response.data.data.

YaeVo Over a year ago

this is the console log: controllers.js:31 Object {data: "<p>Verbindung zum MySQL Server erfolgreich aufgebaut.</p>No such file or directory", status: 200, config: Object, statusText: "OK"}

Mike Feltman Over a year ago

My Deutsch is pretty rusty, but that looks like some kind of error to me, even though you're getting a status of 200 back. You might just want to navigate to the URL in the browser and see what you're getting. At any rate, your client code is now correct. I'd recommend digging into the server side and opening a new question specific to it if you need further assistance.

|

Collectives™ on Stack Overflow

AngularJS doesn't display MySQL results *edited

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related