CODEWITHSUNDEEP
phphtmlangularjsjson
Scott Dyk
Scott Dyk

Reputation: 3

Angular JS - Using PHP to generate JSON data, cannot display in 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!

Upvotes: 0

Views: 243

Answers (3)

Alex Szabo
Alex Szabo

Reputation: 3276

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.

Upvotes: 0

Abdelrahman M. Allam
Abdelrahman M. Allam

Reputation: 922

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

Upvotes: 1

webdeb
webdeb

Reputation: 13211

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

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

Upvotes: 0

Related Questions