Angular JS - 使用 PHP 生成 JSON 数据，无法在 HTML 中显示答案

【问题标题】：Angular JS - Using PHP to generate JSON data, cannot display in HTMLAngular JS - 使用 PHP 生成 JSON 数据，无法在 HTML 中显示
【发布时间】：2016-03-16 21:03:55
【问题描述】：

我是 stackoverflow 的新手，对编码也很陌生，所以我很感激大家的耐心。

我正在使用以下 PHP 生成 JSON 数据：

<?php

$connect = odbc_connect("database", "user", "password");

header("Access-Control-Allow-Origin: *");

# query the users table for name and surname
$query = "SELECT P1AFNR, P1AFHP, P1AFMG, P1L1DA, P1TENR, P1BEZ1, P1AKDN FROM AFP1E "
    . "WHERE P1L1DA >= 20100101 and P1L1DA <= 99991231 AND P1ST01 < 68 "
    . "AND P1PRKA = 'C' ORDER by P1L1DA";

# perform the query
$result = odbc_exec($connect, $query);

// fetch the data from the database
$x = 1;
$outp = "";
while (odbc_fetch_row($result)) {
   if ($outp != "") {$outp .= ",";}
$outp .= '{"OrderNo":"'     .odbc_result($result, 1)                            .'",';
$outp .= '"OrderPos":"'     .odbc_result($result, 2)                            .'"}';  
}
$outp ='{"orders":['.$outp.']}';

header("Content-Type: application/json");
echo($outp);
?>

这是我的 JavaScript 和 HTML。注意：注释掉的 Javascript 行用于测试，我将在下面解释。

var app = angular.module('XVASOrders', []);
app.controller("AS400data", ['$http', function($http) {
    $http.get("AS400.php")
    .then(function (res) {
       this.OrderData = res.data;
    //   this.OrderData = {"orders":[{"OrderNo":"175782","OrderPos":"1"},{"OrderNo":"176692","OrderPos":"3"}]};
        console.log(this.OrderData);
    });      
}]);

<html ng-app="XVASOrders">
    <head>
        <title>Angular - XVAS orders</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script src="XVASOrders.js"></script>  
  
    </head>
    <body ng-controller="AS400data as AS400">
        <table>
            {{AS400.OrderData}} </br>
            {{AS400.OrderData.orders}} </br>
            {{AS400.OrderData.orders[0]}} </br>
            {{AS400.OrderData.orders[1]}}
            <tr ng-repeat="xord in AS400.OrderData.orders">
                <td>{{ xord.OrderNo }}</td>
                <td>{{ xord.OrderPos }}</td>
            </tr>  
        </table>
    </body>
</html>

如果我通过在 JavaScript 中取消注释该行来使用硬编码数据进行测试，这将非常有效。但是当我使用 PHP 生成 JSON 时，它不会。

我可以在浏览器中打开 AS400.php 文件，然后复制数据。如果我将它直接粘贴到 JavaScript 测试行中，它就可以工作。这让我认为我正在正确地生成我的数据。我也将这些数据粘贴到一个单独的 JSON 文件中，在上面使用 $http.get 而不是 AS400.php，但它不起作用。

最后，在我的 JavaScript console.log(this.OrderData);显示数据正在从 PHP 中读取。事实上，在我的 Web 浏览器的控制台中，OrderData 对于有效的测试和无效的 PHP 看起来是一样的。

我一个接一个地阅读了一个又一个帖子，我不知所措。感谢大家的帮助！

【问题讨论】：

您可以使用json_encode($data)，而不是手动编写json，其中$data是一个php数组。

标签： php html angularjs json

【解决方案1】：

需要正确引用你的控制器this范围到vm

var app = angular.module('XVASOrders', []);
app.controller("AS400data", ['$http', function($http) {
    vm = this;
    $http.get("AS400.php")
    .then(function (res) {
       vm.OrderData = res.data; // make sure you get correctly json "JSON.parse"
    //   this.OrderData = {"orders":[{"OrderNo":"175782","OrderPos":"1"},{"OrderNo":"176692","OrderPos":"3"}]};
        console.log(vm.OrderData);
    });      
}]);

【讨论】：

【解决方案2】：

所以基本上，所有的答案，结合起来......

在你的 PHP 文件中，我建议你创建一个数组或一个对象，最终结果应该是 json_encode($arr); 而不是手工制作的 JSON 字符串的回显。

如果您打算像这样前进，那么应该在您的控制器中更改这些：

app.controller("AS400data", ['$http', function($http) {
    //Assign 'this' to a variable - so we can reach it in other scopes as well
    var self = this;

     //Initialize value, so angular will show an empty result set until the $http.get returns, instead of an error.
    self.OrderData = []; 

    $http.get("AS400.php").then(function (res) {
        //This takes the outputted string from the PHP file, and constructs a Javascript Object from that
        self.OrderData = JSON.parse(res.data);
        console.log(self.OrderData);
    });      
}]);

为什么现在不起作用？

您在 $http.get().then() 内使用 this，这对父作用域不可见。
您的json 返回为string。必须先将其解析为 JavaScript object，然后 Angular 才能使用它。

【讨论】：

【解决方案3】：

尝试将其添加到 $scope.OrdersData，而不是 this.OrdersData，或者缺少其他内容？

并将(<$scope>, $http) 添加到您的控制器

【讨论】：