Angular.js JSON Fetching Example

Hello there! Today’s example’s about displaying data from a JSON file to an Angular.js application.
 
 
 
 
 
 
 
 
 
 

Want to be an AngularJS Ninja?

Subscribe to our newsletter and download the AngularJS Programming Cookbook right now!

In order to get you prepared for your AngularJS development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download Now

Thank you!

We will contact you soon.

1. Introduction

1.1 What is JSON

JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers.

It is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

1.2 Example’s concept

In this example we will demonstrate a simple way to retrieve a JSON file and display the respective information to our Angular application, in a user-friendly way. Specifically, we ‘ll here deal with countries’ population around the world.

1.2.1 The JSON file

I have already prepared a countries json file, which provides codenames and population data for several countries around the world, like this:

1.2.2 The app itself

So, what’s the plan?

1. Fetch the JSON.
2. Display JSON‘s information in a more human-readable way.

Fetching the JSON at first, means that this has to be done each time the app is being loaded to the browser. That is, the corresponding action will take place into the head‘s script.

Ok, that was the easy part, what about the difficult one? The fore-mentioned “action” is actually a call to the $http service, a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.

Practically, this means that you have to deploy your app in a web server, rather than executing it in a browser. For further details about this fact, please consult this post.

The general usage of the $http service is a single argument (configuration object) that is used to generate an HTTP request. It returns a promise with two $http methods: success and error.

Here’s how a simple GET request looks like:

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

We’ll only make use of the success and guess what?! On service’s successful call/execution, we want to load our JSON file into a global variable, in order to be accessible all over the app and yes, your guess was right, $scope is the global variable that we ‘re searching for!

In addition, the $http core service, provides shortcut methods, where the only requirement is the URL that has to be processed, whereas the request data must be passed in for POST/PUT requests:

$http.get('/someUrl').success(successCallback);

2. The Example

Time for action!

2.1 Loading JSON into $scope

According to the fore-mentioned notes, we have to load our JSON file into a $scope variable, let’s say “countries”:

$http.get('countries.json').success(function(data) {
    $scope.countries = data;
});

Obviously, this service call has to be a part of an Angular’s app controller definition, so, assuming that we named our angular app as “countryApp”, here’s the updated format of our service call:

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

If you need further assistance according to Angular Controllers, please take a look at this post.

2.2 Displaying JSON data into a table

Now that we ‘ve loaded all the JSON’s data into $scope.countries, let’s display them to a table with three columns: code, name, population. This fact is translated into two requirements:

1. We have to find a way to repeatedly parse all the data from $scope.variables (as we obviously don’t want to exercise our handwriting for more than 70 separate countries).
2. We want to divide each country’s data, into code, name and population, in order to display each one in the corresponding table’s column

Defining the table’s headers is very easy:

<tr>
	<th>Code</th>
	<th>Country</th>
	<th>Population</th>
</tr>

Now, to fullfil the first requirement, we ‘ll use Angular’s ngRepeat directive, which instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop vriable is set to the current location item, and $index is set to the item index or key.

In our case, to repeatedly loop over each country, we have to assume that each country is a table row:

<tr ng-repeat="country in countries">

</tr>

Fullfilling the second requirement is now easier, that the country processed each time can be accessed from the country variable:

<tr ng-repeat="country in countries | orderBy: 'code' ">
	<td>{{country.code}}</td>
	<td>{{country.name}}</td>
	<td>{{country.population}}</td>
</tr>

Here is the final structure of our app:

index.html

<html ng-app="countryApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
    <link rel="stylesheet" href="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/3.3.2/css/bootstrap.min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', function ($scope, $http){
        $http.get('countries.json').success(function(data) {
          $scope.countries = data;
        });
      });
    </script>
  </head>
  <body ng-controller="CountryCtrl">
	<h2>Angular.js JSON Fetching Example</h2>
    <table>
      <tr>
        <th>Code</th>
		<th>Country</th>
        <th>Population</th>
      </tr>
      <tr ng-repeat="country in countries | orderBy: 'code' ">
        <td>{{country.code}}</td>
		<td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
  </body>
</html>

3. Demo

Let’s run it in a local server.

4. Download

This was an example of Angular.js JSON Fetching.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

and many more ....

I agree to the Terms and Privacy Policy

Sign up

Thank you!

We will contact you soon.