Last updated on February 15th, 2022 at 12:52 pm
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.
{
"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>