In this post we will see how to fetch data from a JSON file in angularjs. We will use the ‘$http’ service to get the data and make use of ‘$q’ to return a promise.

Why do we need ‘promise’ to fetch data? So that we can control the flow of our program in a sane manner. For example, if we make a ‘http’ call without using a promise, JS will not wait for the ‘http’ call to be complete. It will just move on to the next line of code and if that line is a ‘return’ statement then it will return ‘undefined’. But with a promise, you tell JS to wait here till the ‘http’ call is complete cause I have a promise to full fill 🙂 .

This is the third post in a series of posts about fetching data in angularjs. Here are the topics covered in this series.

As always let’s start by adding the required files.

Folder Structure

Data In JSON file

Data In JSON file

We have added three files under ‘dataInJsonFile’ folder. We have also added a new folder called ‘data’ that contains our JSON file.

Next we have to make few changes to ‘index.html’ and ‘appModule.js’. First up ‘index.html’

index.html

Fetching Data In Angularjs
Fetching Data In Angularjs
  1. Data In Controller
  2. Fetch data stored in a service
  3. Fetch data from a JSON file
  4. API call to get data
  5. Resolve

Changes that we have made :

  • First we add a link to the third ‘li’ – ‘Data In A JSON File'(‘/datainjson’ is the third route we will define).
  • Finally we add two more scripts files – ‘dijController.js’, ‘dijService.js’.

Next we update the ‘appModule.js’ file.

appModule.js

var fetchDataApp = angular.module( 'fetchDataApp', [
	'ngRoute',
	'dataInControllerCntrl',
	'dataInServiceCntrl',
	'dataInJsonCntrl'
] );
fetchDataApp.config( [ '$routeProvider', function( $routeProvider ) {
	$routeProvider.
	when( '/dataincontroller', {
		templateUrl: 'modules/dataInController/dataInController.html',
		controller: 'dicCntrl'
	} )
	.when( '/datainservice', {
		templateUrl: 'modules/dataInService/dataInService.html',
		controller: 'disCntrl'
	} )
	.when( '/datainjson', {
		templateUrl: 'modules/dataInJsonFile/dataInJson.html',
		controller: 'dijCntrl'
	} );
} ] );

Here is what is going on :

  • First we tell angular that there is one more module called ‘dataInJsonCntrl’.
  • Next we define our third route ‘/datainjson’.
  • Lastly we tell angular what html file to use for the view and the controller to be used for this route.

Fetch data from a json file

First up HTML.

dataInJson.html

Fetching data stored in a JSON file

House Greyjoy

Character Id Character Name Character Title
{{char.charId}} {{char.charName}} {{char.charTitle}}

The HTML strucutre remains the same as the last two posts Data In Controller and Data In Service. Next let’s have a look at the controller.

dijController.js

var dataInJsonCntrl = angular.module( 'dataInJsonCntrl', []);
dataInJsonCntrl.controller( 'dijCntrl', [ '$scope', 'dijService', function( $scope, dijService ) {
  dijService.then( function( response ) {
    $scope.charJson = response.data;
  } );
} ] );

So what’s going on here? let’s see

  • We tell angular that this module is called ‘dataInJsonCntrl ‘.
  • Then we add a controller to this module, we call this controller ‘dijCntrl’.
  • We are injecting ‘dijService’ service as a dependency in this controller(we will look at the service in a moment).
  • We are using ‘then’ to tell angular that only after you get a response from the service perform the actions in the anonymous function. In our case assign ‘respone.data’ to ‘charJson’.

And now the service file.

dijService.js

fetchDataApp.service( 'dijService', function( $http, $q ) {
  var deferred = $q.defer();
  $http.get( 'data/data.json' ).then( function( response ) {
	  deferred.resolve( response );
  }, function( response ) {
	  deferred.reject( 'Error' );
  } );
  return deferred.promise;
} );

Let’s understand what is going on here :

  • First we tell angular, here is our ‘dijService’ service, and we are associating the service with our app ‘fetchDataApp’.
  • Next we are injecting two dependencies to our service ‘$http’ and ‘$q’
    • ‘$http’ will be used to make a http call to our json file, in our case we are making a ‘get’ request, and hence use the ‘$http.get()’ method.
    • ‘$q’ is used to return a promise.
  • We create a ‘deferred’ object using the ‘$q.defer()’ function. This object will expose three methods ‘resolve()’, ‘reject()’ and ‘notify()’.
  • ‘then()’ method has two parts, first one is executed on success and the second one is executed on error.
    • So on success we call the ‘resolve()’ method and pass it the response.
    • And on error we call the ‘reject()’ method and pass it a string.
  • Now once the http call is done and the required part of the then function is called only then will the promise object be returned.
  • Important to note that we are returning the promise object. Our data from the JSON file is inside this object. This is the reason why we assign ‘response.data’ to ‘charJson’ in the controller.
  • Note : We are not handling any error scenario in our controller. To do that just add a second anonymous function to the ‘then()’ method in the controller and then you decide how you want to handle it. For example you can hide the table and show a error message or show some error message in the table. We will see a bit of this in our next post.

    That’s about it for this post. You can find the code on Github