Angular JS - Using PHP to generate JSON data, cannot display in HTML

Question

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!

Instead of composing json manually, you can use json_encode($data), where $data is a php array. — Borys Serebrov
– Borys Serebrov, Commented Mar 16, 2016 at 21:29

Abdelrahman M. Allam · Accepted Answer · 2016-03-16 21:23:14Z

1

need to reference your controller correctly this scope to 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);
    });      
}]);

answered Mar 16, 2016 at 21:23

Abdelrahman M. Allam

92210 silver badges18 bronze badges

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

Comments

Alex Szabo · Accepted Answer · 2016-03-16 21:40:10Z

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.

webdeb · Accepted Answer · 2016-03-16 21:07:33Z

0

try to add it to $scope.OrdersData, instead of this.OrdersData, or am missing something else?

and add (<$scope>, $http) to your controller

answered Mar 16, 2016 at 21:07

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angular JS - Using PHP to generate JSON data, cannot display in HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related