Last updated on November 22nd, 2024 at 12:35 pm

AngularJS snippet sets up a basic application that reads data from a JSON file and displays it in a table. Below is an explanation of the script and suggestions to make it functional.

AngularJS 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]"
	}]
}

First of all we load the framework (angular.min.js) from google.

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

To read a JSON file with AngularJS, the data contained within the file is accessed and presented. This is accomplished through the use of AngularJS directives such as ng-app, ng-controller, and ng-repeat.
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.webtutorials.dev/angularjs/file.json). It reads the data and loads inside the “tr ng-repeat” HTML attribute.

<script>
   // AngularJS Application
    var app = angular.module('DemoApp', []);
    app.controller('cCtrl', function($scope, $http) {
        // Fetch data from JSON file
        $http.get('file.json').then(function(response) {
            $scope.FileName = response.data;
        }, function(error) {
            console.error('Error fetching data:', error);
        });
    });
</script>

Complete code will look like the one below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS JSON Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="cCtrl">
    <h2>Data from JSON File</h2>
    <p>The data below is being called from a JSON file. Thanks to AngularJS!</p>
    <table border="1" cellpadding="5">
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr ng-repeat="x in FileName">
            <td>{{ x.FirstName }}</td>
            <td>{{ x.Email }}</td>
        </tr>
    </table>
</div>

<script>
    // AngularJS Application
    var app = angular.module('DemoApp', []);
    app.controller('cCtrl', function($scope, $http) {
        // Fetch data from JSON file
        $http.get('file.json').then(function(response) {
            $scope.FileName = response.data;
        }, function(error) {
            console.error('Error fetching data:', error);
        });
    });
</script>
</body>
</html>

This script fetches data dynamically from the file.json file and displays it in the table using AngularJS.

DEMO