Read JSON data with AngularJS from PHP connecting to SQL

Question

I'll briefly explain what I am trying to do.

I have different entries on a mySql database, I want to load them from a PHP page, convert to JSON, and eventually read them back through AngularJS. So far I have manage to do all the steps but the last one. I'll go step by step so that other people can use this as a reference:

/// GRAB DATA FROM SQL DATABASE WITH PHP

access_db.php

<!DOCTYPE html>
<html>
<body>


<?php

    $host = "myhost";
    $user = "myusername";
    $psw = "mypsw";
    $dbname = "mydatabasename";

    //open connection to mysql db
    $conn = mysqli_connect($host,$user,$psw,$dbname); // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT EntryName as name, EntryType as type, EntryPlatform as platform, EntryStatus as status, EntryDate as submitDate FROM pl_entries";
    $result = $conn->query($sql);

    $rows = array();

    if ($result->num_rows > 0){
        while($r = $result->fetch_assoc()){
            $rows[] = $r;
        }
        echo json_encode($rows);
    } else {
        echo "0 results";
    }
    mysqli_close($conn);
?>

</body>
</html>

If I run the php file, i get this:

[{"name":"name1","type":"type1","platform":"platform1","status":"status1","submitDate":"date1"},{"name":"name2","type":"type2","platform":"platform2","status":"status2","submitDate":"date2"},{"name":"name3","type":"type3","platform":"platform3","status":"status3","submitDate":"date3"},{"name":"name4","type":"type4","platform":"platform4","status":"status4","submitDate":"date4"}]

The connection with the database therefore seem to work correctly.

/// READ THE JSON WITH ANGULARJS (the problematic part)

for this of course I need both an HTML page as well as a JS file.

dbService.js

var app = angular.module('dbApp', []);

function GetEntries($scope, $http){
    $http.get('/php/access_db.php').success(function(data) {
        $scope.entries = data;
    });
}

index.html (I removed part of the code to make it more readable)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <!-- AngularJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <script src="js/dbService.js"></script>

    </head>

    <body ng-app="dbApp">  

            <div class="main" ng-controller="GetEntries">
                <div class="container">
                    <!-- ENTRIES LIST -->

                    <div id="diary">
                        <div ng-repeat="entry in entries | orderBy: '-date'">
                            <div class="row">

                                    <h1>{{ entry.submitDate | date: 'dd' }}</h1>
                                    <p>{{ entry.submitDate | date: 'MMM'}}, {{ entry.submitDate | date: 'yyyy'}}</p>

                                    <p>{{ entry.type }}</p>
                                    <h1>{{ entry.name }}</h1>
                                    <p>{{ entry.platform }}</p>
                                    <p>{{ entry.status }}</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </body>

</html>

The result of this is that nothing shows up on index.html.

EDIT: to be clearer, none of the AngularJS elements appear, which I guess means that it correctly tries to load data, but probably can't correctly parse it.

I believe the project is in the JS file, but at this point I tried so many different things that I am just confused. I hope someone can help me out understanding how to fix this situation, I hope I provided enough details.

Thanks!

add console.log(data); after $scope.entries = data; and copy paste or tell me what you have in console please — ThomasP1988
Are you sure you declare the controller correctly? I can't tell since you did not give that piece of code — geckob
At this stage I'm sure I messed up the controller, as you mentioned. That is actually the only code I have on my js file — AlexKalopsia
@ThomasP1988 for some whatever reason Firebug doesn't want to debug the page and I have no idea why... — AlexKalopsia

geckob geckob · Accepted Answer · 2015-07-01T20:36:51

There a few possible reasons why you are facing this problem. Try to make sure your controller is working first. Check your console to see it is initiating or not.

I think you are confused between controller and service. I saw you injected GetServices which meant for services not controller

var myApp = angular.module('dbApp',[]);

myApp.controller('GetEntries', ['$scope', '$http', function($scope,$http) {
   console.log("Initiating the controller");
   $http.get('/php/access_db.php').success(function(data) {
    $scope.entries = data;
    });
}]);

Here is a simple app with $http.get usage. I use random API but it should work with your PHP server. http://plnkr.co/edit/ZzPrkg8yokh1jXtzrmdR

This is not really a good practice. Try to move the http request to services instead of controller.

Read JSON data with AngularJS from PHP connecting to SQL

1 Answers