AngularJS: Working with JSON Data & HTTP Service

Facebook Tweet LinkedIn Pin Print EmailShares

This article shows an example on how you can fetch JSON data from external file.

First, let’s create an example of inline JSON data inside the controller.

In the below code, in countryController, we have countries array containing country and capital name. In the HTML view, we have used ng-repeat directive to loop through the countries array and print the country name and capital name.


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            
            myApp.controller('countryController', function($scope){
                $scope.countries = [
                        {name:'Nepal', capital:'Kathmandu'},
                        {name:'India', capital:'New Delhi'},
                        {name:'USA', capital:'Washington DC'},
                        {name:'UK', capital:'London'},
                        {name:'Sri Lanka', capital:'Colombo'}
                    ];
            });
        </script>       
    </head>
    <body>      
        <div ng-controller="countryController">
            <table style="border:1px solid #CCC; margin-top:10px">              
                <tr>
                    <th>Country</th>
                    <th>Capital</th>
                </tr>
                <tr ng-repeat="country in countries | orderBy:'name'">
                    <td>{{country.name}}</td>
                    <td>{{country.capital}}</td>
                </tr>
            </table>    
        </div>  
    </body>
</html>

Now, in the next example below, we keep the countries data into an external JSON file and we call that file using AngularJS service called $http. $http service is used to read data from external file or server. It requests the server file and returns a response.

Let’s first create a new JSON file named countries.json. Here’s the content of that file.

countries.json


[
    {
        "name":"Nepal", 
        "capital":"Kathmandu"
    },
    {
        "name":"India", 
        "capital":"New Delhi"
    },
    {
        "name":"USA", 
        "capital":"Washington DC"
    },
    {
        "name":"UK", 
        "capital":"London"
    },
    {
        "name":"Sri Lanka", 
        "capital":"Colombo"
    }
]

Here’s the updated application code where we use $http service in the controller.


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            
            myApp.controller('countryController', function($scope, $http) {                 
                $http({
                        method: 'GET',
                        url: 'countries.json'
                    })
                    .then(function successCallback(response) {
                        $scope.countries = response.data;
                    }, function errorCallback(response) {
                        console.log('Something went wrong.');
                    }); 
                
                // ALTERNATIVE METHOD   
                /*$http.get('countries.json')
                    .then(function successCallback(response) {
                        $scope.countries = response.data;
                    }, function errorCallback(response) {
                        console.log('Something went wrong.');
                    });*/   
            });
        </script>       
    </head>
    <body>      
        <div ng-controller="countryController">
            <table style="border:1px solid #CCC; margin-top:10px">              
                <tr>
                    <th>Country</th>
                    <th>Capital</th>
                </tr>
                <tr ng-repeat="country in countries | orderBy:'name'">
                    <td>{{country.name}}</td>
                    <td>{{country.capital}}</td>
                </tr>
            </table>    
        </div>  
    </body>
</html>

Hope this helps. Thanks.

Related posts: