来自PHP的$ http.get JSON无法正常工作

Question

First of all I am new in programming and I am not a native English speaker, so please forgive me any mistakes in correct naming things etc. in the following question :)

This is my JSON output:

[{"Year":"2017","Month":"1","Day":"1"},{"Year":"2017","Month":"1","Day":"2"},{"Year":"2017","Month":"1","Day":"3"},{"Year":"2017","Month":"1","Day":"4"},{"Year":"2017","Month":"1","Day":"5"},{"Year":"2017","Month":"1","Day":"6"},{"Year":"2017","Month":"1","Day":"7"},{"Year":"2017","Month":"1","Day":"8"},{"Year":"2017","Month":"1","Day":"9"},{"Year":"2017","Month":"1","Day":"10"},{"Year":"2017","Month":"1","Day":"11"},{"Year":"2017","Month":"1","Day":"12"},{"Year":"2017","Month":"1","Day":"13"},{"Year":"2017","Month":"1","Day":"14"},{"Year":"2017","Month":"1","Day":"15"},{"Year":"2017","Month":"1","Day":"16"},{"Year":"2017","Month":"1","Day":"17"},{"Year":"2017","Month":"1","Day":"18"},{"Year":"2017","Month":"1","Day":"19"},{"Year":"2017","Month":"1","Day":"20"},{"Year":"2017","Month":"1","Day":"21"},{"Year":"2017","Month":"1","Day":"22"},{"Year":"2017","Month":"1","Day":"23"},{"Year":"2017","Month":"1","Day":"24"},{"Year":"2017","Month":"1","Day":"25"},{"Year":"2017","Month":"1","Day":"26"},{"Year":"2017","Month":"1","Day":"27"},{"Year":"2017","Month":"1","Day":"28"},{"Year":"2017","Month":"1","Day":"29"},{"Year":"2017","Month":"1","Day":"30"},{"Year":"2017","Month":"1","Day":"31"}]

I have checked it on valiator and it was accepted.

This is a RESTful API, using SlimApp, Apache virtual host, mysql database.

This is a

calendar.php , which gets the JSON content from the SQL table:

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

$app = new \Slim\App;

// Get All Customers
$app->get('/api/calendar', function (Request $request, Response $response) {

    // echo 'CALENDAR'; });

    $sql = "SELECT * FROM days";

    try {
    // Get DB Object
    $dbcalendar = new dbcalendar();
    //Connect
    $dbcalendar = $dbcalendar->connect();

    $stmt = $dbcalendar->query($sql);
    $dbcalendar = $stmt->fetchAll(PDO::FETCH_OBJ);
    // $dbcalendar = null;

    echo json_encode($dbcalendar);

    } catch(PDOException $e) {
        echo '{"error": {"text": '.$e->getMessage().'}';
    }
});`. 

Here are the files from AngularJS:

days.js

app.factory('days', ['$http', function($http) {
    return $http.get('http://slimapp/api/calendar/index.html')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}]);`,

DaysController.js

app.controller('DaysController', ['$scope', 'days', function($scope, days) {
    days.success(function(data) {
        $scope.days = data;
    });
}]);,

app.js

var app = angular.module('CalendarApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            controller: "DaysController",
            templateUrl: "views/test.html"
        })
        .otherwise({
            redirecTo: "/"
        });
});

test.html

<div ng-repeat="day in days"> 
<p> {{day.Year}} </p>
</div>.

When I type in http://slimapp/api/calendar in the browser, the JSON content is displayed as shown above.

When put some other code into test.html , for example: <p> Hello world </p> , everything is displayed fine in the browser.

I use older version of AngularJS1.X, as this is the version I learned on CodeCademy. Therefore I use .success and .error inside my $http.get service.

I have also installed "Allow-Control-Allow-Origin *" extension in my Chrome browser.

When I want to display the JSON content with test.html

<div ng-repeat="day in days"> 
    <p> {{day.Year}} </p>
</div>

I get the blank page in the browser. There isn't any error message, nothing.

Please help my, as I have been struggling with this issue for two days, reading lots of different explainations, comments and so. I really got stuck :(

OK. I have changed calendar.php according to suggestion from the comment:

`<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

$app = new \Slim\App;

// Get All Customers
$app->get('/api/calendar', function (Request $request, Response $response) {

    // echo 'CALENDAR'; });

    $sql = "SELECT * FROM days";

    try {
    // Get DB Object
    $dbcalendar = new dbcalendar();
    //Connect
    $dbcalendar = $dbcalendar->connect();

    $stmt = $dbcalendar->query($sql);
    $dbcalendar = $stmt->fetchAll(PDO::FETCH_OBJ);
    // $dbcalendar = null;

    echo json_encode($dbcalendar);
    header("Content-type:application/json");
    } catch(PDOException $e) {
        echo '{"error": {"text": '.$e->getMessage().'}';
    }
});`

but the problem still exists.

Answer 1

Set the Content-Type to application/json when echoing JSON. This way JavaScript will automatically parse the response string as JSON, otherwise you will have to do so by converting the response by hand with JSON.parse()

Your PHP code is also error prone, if an exception is thrown that is not PDOException or does not inherit from it, then you will get no information about the error.

Answer 2

Have you tried returning the JSON response from SLIM ? Barring that your db query is successful this should work:

$app->get('/api/calendar', function (Request $request, Response $response) {

    // echo 'CALENDAR'; });

    $sql = "SELECT * FROM days";

    try {
        // Get DB Object
        $dbcalendar = new dbcalendar();
        //Connect
        $dbcalendar = $dbcalendar->connect();

        $stmt = $dbcalendar->query($sql);
        $dbcalendar = $stmt->fetchAll(PDO::FETCH_OBJ);
        // $dbcalendar = null;

        return $response->withJson($dbcalendar);
    } catch(PDOException $e) {
        $error = array('error' => array('text' => $e->getMessage()));
        return $response->withJson($error,500);
    }

});