AngularJS read JSON file $http service

Question

I am having trouble to read data from my test.json file with the #http service. I am running all in a xampp localhost, can't really figure what is happening, here is the js code. Thanks in advance for the help.

<script type="text/javascript">
var app = angular.module('myApp', []);
        app.controller('myCtrl', ['$http', '$scope', function($http, $scope){
            $http.get('test.json').success(function(response){
                $scope.myData = response;
            });
        }]);
</script>

EDIT: That is the json file:
[{"id":"1","name":"John"}, {"id":"2","name":"Paul"},]

And this is the rest of the html:

<ul>
    <li ng-repeat="data in myData">
        {{data.id}}
        {{data.name}}
    </li>
</ul>

Check you js console and tell us what is error or msg is printing there. — Akram Saouri
– Akram Saouri, Commented May 20, 2016 at 16:09
Where is the test.json? Are you parsing the response which is json? — Sajal
– Sajal, Commented May 20, 2016 at 16:12
this code should not make any trouble. please post your full code. — Rohìt Jíndal
– Rohìt Jíndal, Commented May 20, 2016 at 16:29
I've got no errors showing up in the console. I've got two files in a folder one is the test.json and the other is the index.php file. — clr19
– clr19, Commented May 21, 2016 at 11:05

Sofiene Djebali · Accepted Answer · 2016-05-20 16:13:36Z

-1

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.

JAVASCRIPT

<script type="text/javascript">
var app = angular.module('myApp', []);
        app.controller('myCtrl', ['$http', '$scope', function($http, $scope){
            $http.get('test.json').then(function(response){
                $scope.myData = response;
            });
        }]);
</script>

answered May 20, 2016 at 16:13

Sofiene Djebali

4,5481 gold badge24 silver badges28 bronze badges

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

Comments

DLoneDeveloper · Accepted Answer · 2016-05-20 17:09:52Z

-1

Try and format your data before passing to scope with the angular.fromJson api.

try this

$scope.myData = angular.fromJson(response);

instead of

$scope.myData = response;

and remember you should resolve with .then not success hope it helps.

edited May 20, 2016 at 17:09

answered May 20, 2016 at 16:31

DLoneDeveloper

972 silver badges4 bronze badges

2 Comments

clr19 Over a year ago

Just tried using angular.fromJson, and now the console shows a 404 error.

clr19 Over a year ago

Never mind I had the wrong name that's why the 404 happend, but still got the same problem. No errors in the console too.

Collectives™ on Stack Overflow

AngularJS read JSON file $http service

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related