Fetch Json file with angularJS

Question

I tried to display data from json file with angularJS but i can't arrive to it. I tried many times but i didn't find the probleme. I copied many other examples and i get the same result. Please help me to find it. Here is my html file:

<html>
   <head>
      <title>Angular JS Includes</title>

   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "App" ng-controller = "TodoCtrl">

        <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
      </div>

      <script>
         var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});
      </script>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

   </body>
</html>

todos.json:

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Sachila Ranawaka · Accepted Answer · 2017-11-06 05:28:40Z

1

Add your angular script before the code.

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>
  var App = angular.module('App', []);

  App.controller('TodoCtrl', function($scope, $http) {
     $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
  });
 </script>

Demo

answered Nov 6, 2017 at 5:28

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Comments

bhansa · Accepted Answer · 2017-11-06 05:35:54Z

1

You need to add the angular script before your custom script, or use the onload function to let the document load.

<html>
   <head>
      <title>Angular JS Includes</title>
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "App" ng-controller = "TodoCtrl">

        <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
      </div>
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

      <script>
         var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get("https://api.myjson.com/bins/zx3wn")
       .then(function(res){
          $scope.todos = res.data;                
        });
});
      </script>

   </body>
</html>

edited Nov 6, 2017 at 5:35

answered Nov 6, 2017 at 5:30

bhansa

7,5763 gold badges35 silver badges58 bronze badges

2 Comments

Gary Over a year ago

This code works, but i how if would like to change another json file? because if i put my angular script before the code i didn't get any result. it's really wreid.

bhansa Over a year ago

It will not give you any result if you put it after your custom script, because there are no angular functions no angular library to your application. It will just print the raw data. Check the console as well when trying.

Gary · Accepted Answer · 2017-11-06 13:21:53Z

0

i just changed the browser to mozilla and it's work. Thank you for your responses.

answered Nov 6, 2017 at 13:21

Gary

2971 gold badge3 silver badges13 bronze badges

3 Comments

bhansa Over a year ago

This is really not the reason why it might work, find the correct reason. If you are loading the json from some other source, check if it is not file:/// load it over a local server.

Gary Over a year ago

Yes you are right, i run it with file:/// that's the real reason. Thank you for your help.

bhansa Over a year ago

Happy to help:) Please mark any of the answers as accepted if it helped. That way the question will be indexed as "answered". Thanks.

Collectives™ on Stack Overflow

Fetch Json file with angularJS

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related