Home » AngularJS10 July 2017

AngularJS: Working with JSON Data & HTTP Service

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.

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.


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

Hope this helps. Thanks.


Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed