dongxuying7583 2016-03-16 21:03
浏览 57
已采纳

Angular JS - 使用PHP生成JSON数据，无法以HTML格式显示

I am new to stackoverflow, and pretty new to coding, so I appreciate the patience.

I am using the following PHP to generate JSON data:

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

Here is my JavaScript & HTML. Note: The Javascript line commented out is used for testing as I will explain below. 

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>

If I test using hardcoded data by uncommenting the line in JavaScript, this works perfectly. But when I use the PHP to generate the JSON it does not.

I can open the AS400.php file in a browser, and copy the data. If I paste it directly into the JavaScript test line it works. This leads me to think I am generating my data correctly. I have also pasted this data into a separate JSON file, used $http.get on that instead of the AS400.php, and it does not work.

Finally, in my JavaScript console.log(this.OrderData); shows me that the data is being read from the PHP. In fact, in the Console of my web browser OrderData looks the same for the test that works, and PHP that does not work.

I have read post after post after post, and I am at a loss. Thanks for all the help!

</div>
  • 写回答

3条回答 默认 最新

  • dou11655853 2016-03-16 21:33
    关注

    So basically, all the answers, combined...

    In your PHP file, I'd advise you to create an array or an object, and the final result should be json_encode($arr); instead of an echo of the hand-crafted JSON string.

    If you plan to move forward like this, then these should be changed in your controller:

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

    Why is it not working at the moment?

    • You are using this inside $http.get().then() that won't be visible to the parent scope.
    • You have your json returned as a string. This will have to be parsed to a JavaScript object, before angular could use it.
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！