CODEWITHSUNDEEP
javascriptangularjsjson
Gary
Gary

Reputation: 297

Fetch Json file with angularJS

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

Upvotes: 0

Views: 73

Answers (3)

Gary
Gary

Reputation: 297

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

Upvotes: 0

bhansa
bhansa

Reputation: 7534

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>

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

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

Upvotes: 1

Related Questions