I am trying to build an AngularJS based front-end to a PHP back-end base application. I build the JSON object with a PHP & MySQL query. The JSON is exported correctly and the data is shown if i use the objet inline with an ng-init directive. But when I mount the Json.php file on the controller something seem to be wrong because I don't see any data.

This is the link to the example, Here the controller is beneath the </body>tag.

This is the main page

<html ng-app="myApp">
    <head>
        <title></title>
    </head>
    <body>
        <div style="direction: ltr">

        </div>
        <h1>תוצאות שאלון</h1>
        <div class="table-responsive" ng-controller="ContentCtrl">          

        <table class="table" id="results" >
            <thead>
                <tr>
                    <th>id</th>
                    <th>q1</th>
                    <th>q2</th>
                    <th>q3</th>
                    <th>textarea</th>
                    <th>phone</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
<tr ng-repeat="answer in answers.data">

                    <td>{{answer.id}}</td>
                    <td>{{answer.q1}}</td>
                    <td>{{answer.q2}}</td>
                    <td>{{answer.q3}}</td>
                    <td>{{answer.textarea}}</td>
                    <td>{{answer.phone}}</td>
                    <td>{{answer.name}}</td>
</tr>



                <?php/* 
                $table = new Results();
                $table->allrows();
                 */?>
            </tbody>
        </table>
        </div>
       <script src="http://code.jquery.com/jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script type="text/javascript" src="js/js.js"></script>
        <!--<script src="js/controllers.js"></script>-->
        <script type="text/javascript">

this is the controller:

    var myApp = angular.module('myApp', []);

myApp.controller('ContentCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('json.php')

    .success(function(data) {

        $scope.answers = data;

        console.log('test');
    });
}]);

Maybe the module should be on another page? I asked this question earlier. Maybe it can help somehow.

share
    
On your linked example page the json.php is giving a 500. – Josiah Keller Jan 22 '16 at 14:44
    
sorry, i chaged the server, this the new link seveloff.com/survey/json.php and this is the new link to the page seveloff.com/survey/results.php – DavSev Jan 22 '16 at 14:46
up vote 0 down vote accepted

The JSON that your json.php file responds with is just an array of objects. But your ng-repeat is iterating over answers.data, which is undefined. You should iterate over answers since that's the array.

<tr ng-repeat="answer in answers">

If for some reason you don't want to change the ng-repeat, then you can change your controller so that it wraps data in an object like this:

$scope.answers = { data: data };
share
    
thank you. so what you suggest me to do? how can I bind the JSON in json.php to the answers.data in the controller – DavSev Jan 22 '16 at 15:16
    
Why not just change your ng-repeat like I showed? – Josiah Keller Jan 22 '16 at 16:10
    
@DavSev Edited. – Josiah Keller Jan 22 '16 at 16:12
    
The ng-repeat at the file is exactley as you wrote. I dont see the difference between what is the file and the directuve that you suggested. What am i missing here? – DavSev Jan 22 '16 at 19:16
    
you were right, the .data was what made the data not to be shown – DavSev Jan 22 '16 at 20:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.