Categories
AngularJS

How to read json in Angular

Last updated on February 15th, 2022 at 12:52 pm

Click to rate this tutorial!
[Total: 0 Average: 0]

Read JSON file using Angular with Demo

Angular JS is a Javascript library maintained by Google. It is a web application framework and a single page application. In this tutorial we are going to read data from a JSON file using Angular JS. Let us name the JSON file as file.json and read JSON file using Angular JS. We are using Angular JS directives like ng-app, ng-controller and ng-repeat.

No complex server side script use here. In fact it is very easy to read a JSON file using Angular JS.

Data inside file.json will look like the one below. It basically contains records with FirstName and Email.

AngularJS How To Read Json File?
AngularJS How To Read Json File?
{
	"records": [{
		"FirstName": "Brian",
		"Email": "[email protected]"
	}, {
		"FirstName": "John",
		"Email": "[email protected]"
	}, {
		"FirstName": "Judy",
		"Email": "[email protected]"
	}, {
		"FirstName": "Levl",
		"Email": "[email protected]"
	}, {
		"FirstName": "Jeffrey",
		"Email": "[email protected]"
	}, {
		"FirstName": "Victoria",
		"Email": "[email protected]"
	}, {
		"FirstName": "Xia",
		"Email": "[email protected]"
	}, {
		"FirstName": "Issac",
		"Email": "[email protected]"
	}, {
		"FirstName": "Gurrero",
		"Email": "[email protected]"
	}]
}

Copy the content above and save it to the file file.json

How to read the json file? It is very easy. First of all we load the framework (angular.min.js) from google.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Once that is done the next step is to declare the HTML part. I am giving ng-app name as DemoApp and ng-controller name as cCtrl.
ng-repeat is a template which repeats HTML at a given number of times.

<div ng-app="DemoApp" ng-controller="cCtrl">
 The data below is being called from a JSON file [file.json]. Thanks to AngularJS :)
 <p>
<table border=1><tr><td><b>Name</b></td><td><b>Email</b></td></tr>
  <tr ng-repeat="x in FileName">
    <td>{{ x.FirstName }}</td>
	<td>{{ x.Email }}</td>
  </tr>
</table>
</div>

Now we are going to call the AngularJS module and the controller to load the external JSON file. My JSON file resides in this location (http://demo.mistonline.in/angularjs/file.json). It reads the data and loads inside the “tr ng-repeat” HTML attribute.

<script>
var app = angular.module('DemoApp', []);
app.controller('cCtrl', function($scope, $http) {
   $http.get("http://demo.mistonline.in/angularjs/file.json")
   .then(function (response) {$scope.FileName = response.data.records;});
});
</script>

Complete code will look like the one below.

<!DOCTYPE html>
<html >
<title>Read JSON File Using AngularJS</title>
<style>
table, th , td  {
  border: 2px solid grey;
  border-collapse: collapse;
    margin-left:auto;
    margin-right:auto;
  padding: 10px;
}
table tr:nth-child(odd) {
  background-color: #f0f0f0;
}
table tr:nth-child(even) {
  background-color: #ffb3b3;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="DemoApp" ng-controller="cCtrl">
 The data below is being called from a JSON file [file.json]. Thanks to AngularJS :)
 <p>
<table border=1><tr><td><b>Name</b></td><td><b>Email</b></td></tr>
  <tr ng-repeat="x in FileName">
    <td>{{ x.FirstName }}</td>
	<td>{{ x.Email }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('cCtrl', function($scope, $http) {
   $http.get("https://demo.mistonline.in/angularjs/file.json")
   .then(function (response) {$scope.FileName = response.data.records;});
});
</script>

DEMO

Click to rate this tutorial!
[Total: 0 Average: 0]

Leave a Reply

Your email address will not be published.