Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Fetching JSON using angular JS

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 421
    Comment on it

    The controller defines a dependency to the $scope and the $http module. An HTTP GET request to the countries.json end point is carried out with the get method. It returns a $promise object with a success and an error method. Once successful, the JSON data is assigned to $scope.posts to make it available in the template.

    The $http service supports the HTTP verbs get, head, post, put, delete and jsonp. We are going to look into more examples in the following chapters.

    The $http service automatically adds certain HTTP headers like for example X-Requested-With: XMLHttpRequest. But you can also set custom HTTP headers by yourself using the $http.defaults function.

    Example :-

    Script :-

      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', function ($scope, $http){
        $http.get('countries.json').success(function(data) {
          $scope.countries = data;
        });
      });
    

    HTML :-

    <table>
      <tr>
        <th>Country</th>
        <th>Code</th>
      </tr>
      <tr ng-repeat="country in countries">
        <td>{{country.name}}</td>
        <td>{{country.code}}</td>
      </tr>
    </table>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: