1

I exported data from MySql db to Json object. What I want to achieve is actually to see the front end data manipulations by angular. I think that the problem is in my controller. I placed the Json object inline in ng-initand it works great.

I tried to lean on this question but with not much success

This is my HTML file

    <html ng-app="myApp">

<head>
    <title></title>
</head>

<body>
    <div style="direction: ltr">
    </div>
    <h1>תוצ�?ות ש�?לון</h1>
    <div class="table-responsive" ng-controller="ContentCtrl">
        <!--ng-controller="ContentCtrl"-->
        <table class="table" id="results">
            <thead>
                <tr>
                    <th>id</th>
                    <th>q 1</th>
                    <th>q 2</th>
                    <th>q 3</th>
                    <th>textarea</th>
                    <th>phone</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="answer in answers">
                    <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>
            </tbody>
        </table>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="http://code.jquery.com/jquery.js"></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>
</body>

</html>

this is the controller.js file

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

myApp.controller('ContentCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('json.php')
    .success(function(data) {
        $scope.answers = data;
    });
}]);

This is my the json i get at the json.php file, controller.js and json.php are in the same folder

[{"id":"6","time":"1453381291","answers":"x","q1":"2","q2":"3","q3":"1","textarea":"test","phone":"954472","name":"Jane"},{"id":"5","time":"1453364067","answers":"x","q1":"1","q2":"2","q3":"3","textarea":"test 1","phone":"954472","name":"John"},{"id":"4","time":"1453363983","answers":"x","q1":"4","q2":"3","q3":"2","textarea":"test 2","phone":"954472","name":"David"}]

Now, I do not get any related error at the consule but I do not see data either.

any help would be great.

7
  • If you do a console.log in the success does it log anything ? Commented Jan 22, 2016 at 7:44
  • I added console lod insile se success scope like this: ' .success(function(data) { $scope.answers = data; console.log('test'); });' and i see the 'test ' string in the consoule Commented Jan 22, 2016 at 7:47
  • Allright, could you make a plunkr with the code ? Commented Jan 22, 2016 at 7:54
  • Can you try <tr ng-repeat="answer in answers.data">? Because, the results would most like be within the data property. Commented Jan 22, 2016 at 7:56
  • added .data but i dont get any errors, i should see the errors at the consule, right? Commented Jan 22, 2016 at 8:01

1 Answer 1

0

Change the order of the javascript files you have included as below this will resolve your problem.

    <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>

For jquery.js file must load before the boostrap.min.js.

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

7 Comments

I changed the order as you suggested but still cant see the data
I had not made any chages in your logic it works at my end by just changing the order of the files. Try to write the code from controller.js in html page only instead of writing it in separate file. Or try by changing the code as below: $http.get('./json.php')
can you please check my link again? i changed the files as you suggested. is there still something missing? goo.gl/gTmV77
You have some error in js.js at line 54:Uncaught ReferenceError: a is not defined kindly resolve this issue first.
Thank you. i fixed the error in line 54. also added the script to the result.php file. instead of linking it but i still dont see the data. may the problem be at the module or the controller? i tried to add the Json inline and it works...
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.